【vite】本地打包【vue2.7】 【ant-design-vue1.x】项目

概要

        针对项目太大webpack本地打包启动项目耗时太久。热更新自动刷新页面状态丢失的问题，接入vite本地启动项目。本文详细记录了接入vite本地运行项目的具体步骤及相关问题的解决方法。

vue项目接入vite详细步骤

提示：当前项目使用vue@2.7.10，组件库ant-design-vue@1.6.2Bert

1、安装基础依赖

npm i -D vite@3 vue-loader@15.10.0 @vitejs/plugin-vue2

• vite使用3.x版本
• vue-loader需要安装15.10.0版本
• vue2.7使用vite打包需要安装@vitejs/plugin-vue2
• 如果使用了jsx语法，需要安装@vitejs/plugin-vue2-jsx，并且需要在script标签上加lang="jsx"
• 如果项目使用less，less需要安装3.X版本，安装4.X版本会报错（ [less] Operation on an invalid type），vite不需要安装less-loader

2、jsx

      如果使用了jsx语法，需要安装@vitejs/plugin-vue2-jsx，并且需要在script标签上加lang="jsx"，

否则会报错 [hmr] Failed to reload /src/components/xxx.vue. This could be due to syntax errors or importing non-existent modules.

3、css

      如果项目使用less，less需要安装3.X版本，安装4.X版本会报错（ [less] Operation on an invalid type）。vite不需要安装less-loader

4、index.html文件

      index.html需要放在根目录下，给index.html手动添加<script type="module" src="/src/main.js"></script>。

如果不想复制一份index.html，可以安装插件vite-plugin-html，并在vite配置项plugins中配置：

5、require报错问题

ReferenceError: require is not defined

vite不支持require引入资源，需要将代码内的require替换成import

6、配置环境变量

在vite配置项define配置环境变量

7、本地开启https

生成临时证书，并在vite配置项https中配置：

或者

安装插件vite-plugin-mkcert，并在vite配置项plugins中配置mkcert()：

并在vite配置项server中配置https：true

8、ant-design-vue相关

• 修改ant-design-vue的主题色需要在vite的css配置项中配置：

配置less全局变量additionalData，需要在配置项后加分号，否则会报错：

[less] missing semi-colon or unrecognised media features on import

• ant-design-vue时间选择器报错，moment没有默认导出，需要安装插件修复vite-plugin-antdv-fix，否则会报错：

TypeError: (void 0) is not a function

9、热更新报错：循环引用

Uncaught ReferenceError: Cannot access 'XXX' before initialization

循环引用类似的场景比如：路由router.js引入了页面组件a.vue，a.vue直接引入了store.js，而store.js又引入了router.js

vite配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
import vueJsx from '@vitejs/plugin-vue2-jsx'
import antdvFix from 'vite-plugin-antdv-fix'
import mkcert from 'vite-plugin-mkcert'
import { createHtmlPlugin } from 'vite-plugin-html'
const Path = require('path')
export default defineConfig({
	mode: 'development',
	publicDir: 'public',
    plugins: [
		mkcert(),
		antdvFix(),
		vue(),
		vueJsx(),
		createHtmlPlugin({
          minify: true,
          inject: {
            data: {},
           },
          // 注：指定entry后，不需要在index.html添加script标签，若添加了建议删除
          entry: 'src/main.js',
          template: 'index.html',
        }),
	],
	build: {
		sourcemap: true,
		commonjsOptions: {
        transformMixedEsModules: true
    },
		target: 'esnext'
	},
	resolve: {
		extensions: ['.js', '.vue', '.json', '.vue', '.css', '.less'],
		alias: {
			'@': Path.resolve(__dirname, '../src'),
		}
	},
	server: {
		host: '',
		port: 443,
		strictPort: false,
		https: true,
		proxy: {
			'/app': {
				target: 'https://****',
				changeOrigin: true,
				secure: true
			}
		}
	},
	css: {
		preprocessorOptions: {
			less: {
				javascriptEnabled: true,
				additionalData: [`@import "${Path.resolve(__dirname, '../src/assets/styles/globalConst.less')}";`],
				modifyVars: {
					'primary-color': '#000000'
				},
			}
		}
	},
	define: {
		'process.env': {
         BUILD_ENV: process.env.BUILD_ENV,
         RUN_TYPE: process.env.RUN_TYPE
       }
	}
})

小结

vite本地启动项目只要几秒钟，热更新基本无感，相比webpack来说，vite本地打包对开发更友好。