Vue3打包构建从webpack改为vite

前言

新创建的vue项目是用webpack创建打包的，想改成vite打包，顺便看看有哪些改变，以下是具体操作的内容。（靠提交记录记的，时间久远，可能有遗漏）

package.json

1. 运行脚本

webpack
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
}
vite
“scripts”: {
“build”: “vue-tsc --noEmit && vite build”,
“dev”: “vite”,
“preview”: “vite preview”
}

2. 开发依赖减少了很多，因为vite内置了很多依赖，无需手动下载

webpack
“devDependencies”: {
“@typescript-eslint/eslint-plugin”: “^5.4.0”,
“@typescript-eslint/parser”: “^5.4.0”,
“@vue/cli-plugin-babel”: “~5.0.0”,
“@vue/cli-plugin-eslint”: “~5.0.0”,
“@vue/cli-plugin-router”: “~5.0.0”,
“@vue/cli-plugin-typescript”: “~5.0.0”,
“@vue/cli-service”: “~5.0.0”,
“@vue/eslint-config-typescript”: “^9.1.0”,
“babel-plugin-import”: “^1.13.5”,
“eslint”: “^7.32.0”,
“eslint-plugin-vue”: “^8.0.3”,
“postcss-pxtorem”: “^6.0.0”,
“sass”: “^1.32.7”,
“sass-loader”: “^12.0.0”,
“typescript”: “~4.5.5”,
“unplugin-vue-components”: “^0.20.1”,
“unplugin-vue-define-options”: “^0.6.2”
}
vite
“devDependencies”: {
“@types/node”: “^12.20.24”,
“@vitejs/plugin-vue”: “^3.0.3”,
“rollup-plugin-copy”: “^3.4.0”,
“typescript”: “^4.6.4”,
“unplugin-vue-components”: “^0.22.4”,
“vite”: “^3.0.7”,
“vue-tsc”: “^0.39.5”
}

3. 完整版如下

{
  "name": "min-demo",
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "build": "vue-tsc --noEmit && vite build",
    "dev": "vite",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tinymce/tinymce-vue": "^4.0.7",
    "amfe-flexible": "^2.2.1",
    "axios": "^0.27.2",
    "copy-webpack-plugin": "^11.0.0",
    "echarts": "^5.3.3",
    "element-plus": "^2.2.14",
    "min-comp": "^0.0.4",
    "mockjs": "^1.1.0",
    "particles.vue3": "^2.2.3",
    "pinia": "^2.0.20",
    "prismjs": "^1.28.0",
    "sass": "^1.54.5",
    "sass-loader": "^13.0.2",
    "three": "^0.143.0",
    "tsparticles": "^2.2.3",
    "vant": "^3.6.0",
    "vite-plugin-dts": "^1.4.1",
    "vite-plugin-md": "^0.20.2",
    "vue": "^3.2.37",
    "vue-router": "^4.1.3"
  },
  "devDependencies": {
    "@types/node": "^12.20.24",
    "@vitejs/plugin-vue": "^3.0.3",
    "rollup-plugin-copy": "^3.4.0",
    "typescript": "^4.6.4",
    "unplugin-vue-components": "^0.22.4",
    "vite": "^3.0.7",
    "vue-tsc": "^0.39.5"
  }
}

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

index.html

1. index.html的位置需要移至和src同级
2. 需要手动引入main.ts
   
3. 由于BASE_URL是webpack内置的全局环境变量，vite无法使用，vite的环境变量属性存放在import.meta.env中

vue.config.js 文件删掉创建vite.config.ts

//vite.config.ts
import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import path from 'path';

export default defineConfig({
    resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src"),
        },
      },
      plugins: [
        vue(),
        Components({
          resolvers: [VantResolver()],
        }),
      ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

require 无法使用，require是webpack自带的，在vite里用import导入文件

//webpack
require("../mock");
//vite
import "../mock/index";
1
2
3
4

批量引入文件

//webpack
const files = require.context('.', true, /\.js$/);
//vite
const files = import.meta.glob("./*.js");
1
2
3
4

vite不支持动态加载文件，解决方案是加上注释

//webpack
component: () => import(`@/views/${folderUrl}/LayoutView.vue`)
//vite
component: () => import(/* @vite-ignore */`@/views/${folderUrl}/LayoutView.vue`)
1
2
3
4

新增vite-env.d.ts

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
1
2
3
4
5

新增tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}
1
2
3
4
5
6
7
8
9

git 提交记录可以在项目里查看