使用Vite对项目进行打包和上线部署

大纲链接 §

[toc]

基本概念

import.meta.url

配置文件

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

import {defineConfig, loadEnv} from 'vite';
// @types/node
// @ts-ignore
import path from 'path';

// plugins
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
// @ts-ignore
import removeConsole from 'vite-plugin-remove-console';

// setup name
import VueSetupExtend from 'vite-plugin-vue-setup-extend';
// 自动引入组件和方法
import autoComponents from 'unplugin-vue-components/vite';
import {AntDesignVueResolver,} from 'unplugin-vue-components/resolvers';
import AutoImport from 'unplugin-auto-import/vite';

//mock
import {viteMockServe} from 'vite-plugin-mock';


// 查看本地环境
// console.log('process.env', process.env);
// console.log('process.env.NODE_ENV', process.env.NODE_ENV);
// console.log('import.meta', import.meta); // Vite 3

/*
*
* 在开发中，分为本地，测试，和线上三种环境，
* 需要根据不同的环境配置项目接口请求地址，
* 可以根据node提供的全局对象process.env
* */

/*
// 本地开发模式
const localEnabled: boolean = (process.env.USE_MOCK as unknown as boolean) || false;
// 生产模式
const prodEnabled: boolean = (process.env.USE_CHUNK_MOCK as unknown as boolean) || false;
*/

// https://vitejs.dev/config/
export default defineConfig(({mode}) => {
  const env = loadEnv(mode, __dirname);
  return {
    // 项目根目录（index.html 文件所在的位置）
    root: './',
    // 开发或生产环境服务的公共基础路径
    base: env.VITE_RES_URL,
    // 开发模式 默认：'development'（开发模式），'production'（生产模式）
    mode: 'production',
    esbuild: {
      jsxFactory: 'h',
      jsxFragment: 'Fragment'
    },
    plugins: [
      vue(),
      vueJsx(),
      VueSetupExtend(),
      // unplugin-vue-components/vite
      autoComponents({
        // ui库解析器，也可以自定义
        // resolvers: [ElementPlusResolver()],
        resolvers: [
          AntDesignVueResolver(),
          /*
          ElementPlusResolver(),
          VantResolver(),
          HeadlessUiResolver(),
          */
        ],
        // 指定组件位置，默认是src/components
        dirs: ['src/components'],
        // valid file extensions for components.
        // 组件的有效文件扩展名
        extensions: ['vue', 'tsx'],
        // 配置文件生成位置
        dts: 'src/components.d.ts',
        // search for subdirectories
        // 搜索子目录
        deep: true,
        // Allow subdirectories as namespace prefix for components.
        // 允许子目录作为组件的命名空间前缀。
        directoryAsNamespace: false,
        // filters for transforming targets
        include: [/.vue$/, /.vue?vue/],
        exclude: [/[\/]node_modules[\/]/, /[\/].git[\/]/, /[\/].nuxt[\/]/],
      }),
      AutoImport({
        // targets to transform
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/, /\.vue\?vue/, // .vue
          /\.md$/, // .md
        ],
        // global imports to register
        imports: ['vue', 'vue-router', 'pinia',/*'vue-i18n', '@vueuse/head', '@vueuse/core'*/],
        // 生成全局声明文件 .eslintrc-auto-import.json ，给eslint用
        // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
        eslintrc: {
          enabled: true, // Default `false`
          filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
          globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
        },
        // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为 'src/auto-import.d.ts'
        dts: 'src/auto-import.d.ts'
      }),
      removeConsole(),
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',

        /**
         * custom insert position
         * @default: body-last
         */
        inject: 'body-last', /*| 'body-first'*/

        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        customDomId: '__svg__icons__dom__',
      }),
      viteMockServe({
        // ignore: /^\_/, // 忽略的文件名
        // ↓解析根目录下的mock文件夹
        mockPath: './mock',
        /*
        localEnabled: localEnabled,  // 开发打包开关
        prodEnabled: prodEnabled, // 生产打包开关
        */
        localEnabled: true,
        supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件
        watchFiles: true, // 监视文件更改
        /*
        // 下面这段代码会被注入 main.ts
        injectCode: `
        import { setupProdMockServer } from '../mock/_createProductionServer';
        ();
        `,
        */
      })
    ],
    server: {
      host: '0.0.0.0' // 解决  Network: use --host to expose
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    css: {
      // 配置 css modules 的行为
      modules: {
        scopeBehaviour: 'local',
        // generateScopedName: // default,
        localsConvention: 'camelCase',
      },
      postcss: {
        plugins: []
      },
      preprocessorOptions: {
        scss: {
          additionalData: `
        @import "@/assets/style/variables.scss";
        @import "@/assets/style/global.scss";
        @import "@/assets/style/reset.scss";
        @import "@/assets/style/mixin.scss";
        @import "@/assets/style/blog-article.scss";
        `,
        }
      }
    },
  };
});

打包

直接pnpm run build就可以得到生产环境的代码，但是如果需要对打包做更精确的操作，还需要单独做一些配置

部署

部署在github

  • 开启Git Pages

部署在gitee

  • 开启Gitee Pages

使用Github Actions实现自动化部署

.github/workflows/deploy-website.yml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

name: Deploy GitHub Pages

on:
  # 每当 push 到 main 分支时触发部署
  push:
    branches: [main]

# 任务
jobs:
  build-and-deploy:
    # 服务器环境：最新版 Ubuntu
    runs-on: ubuntu-latest

    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      # 1、生成静态文件
      - name: Build
        run: yarn install && yarn build:app

      # 2、部署到 GitHub Pages
      - name: Deploy WebSite
        uses: JamesIves/github-pages-deploy-action@v4.2.5
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          REPOSITORY_NAME: xmasuhai/vite-share-blog
          BASE_BRANCH: main
          BRANCH: gh-pages
          FOLDER: dist

遇错

/usr/bin/git worktree remove github-pages-deploy-action-temp-deployment-folder --force fatal: 'github-pages-deploy-action-temp-deployment-folder' is not a working tree

参考文章

相关文章

https://juejin.cn/post/6986169708722520072#heading-17 | Vite+Typescript+React 构建标准化应用 - 掘金 https://cn.vitejs.dev/config/ | 配置 Vite | Vite 官方中文文档 https://juejin.cn/post/7028773763827105829 | Vite 开发实践 - 打包部署 - 掘金 https://juejin.cn/post/7061559210902814750 | Vite 的打包和预览功能 - 掘金 https://juejin.cn/post/6946007023951544357 | Vite生产环境踩坑记录，满满的干货，建议收藏！ - 掘金 https://juejin.cn/post/7032988013361627143 | vite2 + vite.config.js 比较坑的环境变量，vite2模式的使用 - 掘金 https://juejin.cn/post/6992495028425719815 | vue3 + vite 项目搭建 - 配置环境变量env - 掘金 https://juejin.cn/post/6941641892840865805 | 前端工程化之Vite2配置详细说明 - 掘金 https://juejin.cn/post/7072176925061414925 | Vite多环境配置：让项目拥有更高定制化能力 - 掘金 https://juejin.cn/post/6994310850290909214 | vite根据环境变量与模式打包项目 - 掘金 https://juejin.cn/post/6999416108813910053 | 用vitePress高效快速构建面试题文档/博客网站 - 掘金 https://juejin.cn/post/6950203740737503240 | Vite 打包项目 - 掘金 https://juejin.cn/post/6946036158509875208 | 基于 Node.js 的 ssh2 实现前端项目自动化打包、发布和部署 - 掘金 https://juejin.cn/post/7017636195567927333 | 三分钟实现 Vite + Vue3多入口项目开发 - 掘金 https://juejin.cn/post/6951557699079569422 | vite 动态 import 引入打包报错解决方案 - 掘金 https://juejin.cn/post/7044876656049127437 | vite项目初始化之~打包去掉console信息 - 掘金 https://juejin.cn/post/6978033267865812999 | Vite2.0项目的类mono-repo实践（一仓库多项目，独立打包） - 掘金 https://juejin.cn/post/6900852894321836046 | [vite] 开发用vite,打包用webpack–解决别名路径不同的问题 - 掘金 https://juejin.cn/post/6887013512364130311 | 5 分钟带你快速读懂 vite 打包过程 | 源码解读 - 掘金 https://juejin.cn/post/6897253817726238728 | Vite +Vue 3 + Vue Router4 项目打包后首页一片空白 - 掘金 https://juejin.cn/post/7040750959764439048 | Vite为什么快呢？快在哪？说一下我自己的理解吧 - 掘金 https://juejin.cn/post/7065538392322211877 | 老项目从webpack迁移到vite失败经验 - 掘金 https://juejin.cn/post/6923417451333959694 | 浅谈Vite 原理与 Webpack比较 - 掘金 https://juejin.cn/post/7031421642513317918 | 带你解读 webpack 打包原理及vite的优势 - 掘金

https://juejin.cn/post/6986169708722520072#heading-17 | Vite+Typescript+React 构建标准化应用 - 掘金 https://cn.vitejs.dev/config/ | 配置 Vite | Vite 官方中文文档 https://juejin.cn/post/7028773763827105829 | Vite 开发实践 - 打包部署 - 掘金 https://juejin.cn/post/7061559210902814750 | Vite 的打包和预览功能 - 掘金 https://juejin.cn/post/7032988013361627143 | vite2 + vite.config.js 比较坑的环境变量，vite2模式的使用 - 掘金 https://juejin.cn/post/6992495028425719815 | vue3 + vite 项目搭建 - 配置环境变量env - 掘金 https://juejin.cn/post/6941641892840865805 | 前端工程化之Vite2配置详细说明 - 掘金 https://juejin.cn/post/7072176925061414925 | Vite多环境配置：让项目拥有更高定制化能力 - 掘金 https://juejin.cn/post/6994310850290909214 | vite根据环境变量与模式打包项目 - 掘金 https://juejin.cn/post/6999416108813910053 | 用vitePress高效快速构建面试题文档/博客网站 - 掘金 https://juejin.cn/post/6950203740737503240 | Vite 打包项目 - 掘金 https://juejin.cn/post/6946036158509875208 | 基于 Node.js 的 ssh2 实现前端项目自动化打包、发布和部署 - 掘金 https://juejin.cn/post/7017636195567927333 | 三分钟实现 Vite + Vue3多入口项目开发 - 掘金 https://juejin.cn/post/6951557699079569422 | vite 动态 import 引入打包报错解决方案 - 掘金 https://juejin.cn/post/7044876656049127437 | vite项目初始化之~打包去掉console信息 - 掘金 https://juejin.cn/post/6978033267865812999 | Vite2.0项目的类mono-repo实践（一仓库多项目，独立打包） - 掘金 https://juejin.cn/post/6900852894321836046 | [vite] 开发用vite,打包用webpack–解决别名路径不同的问题 - 掘金 https://juejin.cn/post/6887013512364130311 | 5 分钟带你快速读懂 vite 打包过程 | 源码解读 - 掘金 https://juejin.cn/post/6897253817726238728 | Vite +Vue 3 + Vue Router4 项目打包后首页一片空白 - 掘金 https://juejin.cn/post/7040750959764439048 | Vite为什么快呢？快在哪？说一下我自己的理解吧 - 掘金 https://juejin.cn/post/7065538392322211877 | 老项目从webpack迁移到vite失败经验 - 掘金 https://juejin.cn/post/6923417451333959694 | 浅谈Vite 原理与 Webpack比较 - 掘金 https://juejin.cn/post/7031421642513317918 | 带你解读 webpack 打包原理及vite的优势 - 掘金

  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名