2024 年了，webpack 构建的 vue2 项目，由于路由较多，每次修改都会出现编译时间较长的问题（平均 10～40 秒），长期开发的话，非常的不友好。因此决定升级 vite构建。参考了几篇文章，基本 每篇遇到的坑都不少。
本文做一个记录。
主要是各个依赖的版本问题。
全局安装的 vite 版本，建议版本 4.5.3，因为这是对 vue2 能支持的最高版本了。
"vite": "^4.5.3",
vue建议使用2.7.x，既能对 setup 有支持，而且，完全支持 vue2 的特性。
"vue": "^2.7.14",
同时，必备的 vite 对 vue2 的支持插件 2.3.x
"@vitejs/plugin-vue2": "2.3.1",
sass 版本，建议使用 1.76，因为高于这个版本，@import 语法以及嵌套插入父元素属性的写法会被标记为不推荐，出现大量的警告。
"sass": "1.76",
额外的，我们很大概率为了优化首屏加载速度，可能会用到 cdn，那就使用插件
"vite-plugin-cdn-import": "^1.0.1",
最后附上用到的 package.json 以及 vite.config.js 配置
{
"name": "basic-ui",
"version": "4.0.0",
"private": true,
"scripts": {
"pre": "cnpm install || yarn --registry https://registry.npmmirror.com/ || npm install --registry https://registry.npmmirror.com/ ",
"dev": "vite",
"build": "vite build --mode production"
},
"dependencies": {
"@chenfengyuan/vue-qrcode": "^1.0.1",
"@riophae/vue-treeselect": "0.4.0",
"@sscfaith/avue-form-design": "1.3.12",
"autoprefixer": "^10.4.20",
"avue-plugin-ueditor": "^0.2.18",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"classlist-polyfill": "^1.2.0",
"clipboard": "^2.0.4",
"codemirror": "^5.53.2",
"crypto-js": "^3.1.9-1",
"dayjs": "^1.11.13",
"echarts": "^4.2.1",
"element-ui": "2.12.0",
"js-cookie": "^2.2.0",
"less-loader": "^6.0.0",
"nprogress": "^0.2.0",
"qs": "^6.13.0",
"script-loader": "^0.7.2",
"sockjs-client": "1.0.0",
"stomp-websocket": "2.3.4-next",
"vue": "^2.7.14",
"vue-axios": "^2.1.2",
"vue-clipboard2": "^0.3.0",
"vue-cron": "^1.0.9",
"vue-echarts": "^4.0.1",
"vue-json-editor": "^1.2.3",
"vue-json-tree-view": "^2.1.4",
"vue-quill-editor": "3.0.6",
"vue-router": "^3.0.2",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vitejs/plugin-vue2": "2.3.1",
"benz-amr-recorder": "^1.0.14",
"chai": "^4.1.2",
"sass": "1.76",
"vite": "^4.5.3",
"vite-plugin-cdn-import": "^1.0.1",
"vue-template-compiler": "^2.6.10",
"vue-video-player": "^5.0.2"
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
]
}
}
vite.config.js
/**
* 配置参考:
* https://cli.vuejs.org/zh/config/
*/
import path from "path";
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue2";
import { Plugin as importToCDN } from "vite-plugin-cdn-import";
const url = "http://to.youer.server:8090";
export default defineConfig({
// 开发或生产环境服务的公共基础路径,用于指定项目中静态资源的基本路径
base: "/",
css: {
preprocessorOptions: {
scss: {
api: "modern", // or 'modern'
},
},
},
optimizeDeps: {
include: ["vue-cropper", "wangeditor"],
},
// 构建选项
build: {
target: "es2015",
// 指定输出路径（相对于 项目根目录).
outDir: "dist",
// 指定生成静态资源的存放路径（相对于 build.outDir）。在 库模式 下不能使用。
assetsDir: "static",
// 构建后是否生成 source map 文件
sourcemap: false,
minify: "terser",
terserOptions: {
compress: {
drop_console: true, //打包时删除console
pure_funcs: ["console.log"],
drop_debugger: true, //打包时删除debugger
},
output: {
comments: true, // 打包时删除注释
},
},
},
server: {
open: true,
disableHostCheck: true,
port: 5186,
host: "0.0.0.0",
proxy: {
"/api": {
target: url,
ws: false, // 需要websocket 开启
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
// 3.5 以后不需要再配置
},
},
resolve: {
alias: [
{
find: /^~/,
replacement: "",
},
{
find: "@",
replacement: path.resolve(__dirname, "src"),
},
],
// 导入时想要省略的扩展名列表,默认值['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
// 官方文档中说：不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
},
plugins: [
Vue(),
importToCDN({
modules: [
{
name: "vue",
var: "Vue",
path: "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js",
},
{
name: "element-ui", // package.json 中依赖的名称,
var: "ELEMENT", // 全局变量名，根据包里的变量设定，无法自定义
path: "https://cdn.jsdelivr.net/npm/[email protected]/lib/index.min.js", // CDN 链接
css: "https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.min.css", // 依赖有css就填，没有就去掉这个
},
],
}),
// ViteRequireContext(), // 亲测有效，兼容require.context
// transformScss(), // 亲测有效，但是不推荐，建议全局替换deep
// vueJsx()
],
});
标签：vue,js,webpack,vue2,path,import,vite From： https://www.cnblogs.com/aleafo/p/18474436