Vue2.7.14、[email protected] 升级 [email protected]
项目背景
Vue2.7.14、[email protected]、[email protected]、node14.18.3
vite安装
pnpm add [email protected] -D入口文件index.html
文件位置修改
将pulic里的index.html移到根目录下
根目录/public/index.html 到 根目录/index.html
文件内容修改
#remove
#add
#add
Vue title如果是动态的，可以引入 vite-plugin-html
vite.config.js
import { defineConfig } from 'vite'
//让浏览器支持commonjs语法
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
//配置vue
import vue from '@vitejs/plugin-vue2'
import path from 'path'
//兼容require
import vitePluginRequire from 'vite-plugin-require'
//gzip压缩
import viteCompression from 'vite-plugin-compression'
const REPLACEMENT = `${path.resolve(__dirname, './src')}/`
export default defineConfig({
server: {
host: '0.0.0.0',
https: false,
port: 8080,
proxy: {
'/web': {
// 路径中有 /api 的请求都会走这个代理 , 可以自己定义一个,下面移除即可
target: 'https://baidu.com:10011', // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURL
secure: false,
changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
ws: true //, // 是否启用 websockets;
}
}
},
resolve: {
alias: {
'@utils': `${path.resolve(__dirname, './src/utils')}/`,
styles: `${path.resolve(__dirname, './src/styles')}/`,
'@assets': `${path.resolve(__dirname, './src/assets')}/`,
'@': REPLACEMENT,
'@/': REPLACEMENT,
'src/': REPLACEMENT,
vue: 'vue/dist/vue.esm.js' //解决el-table 生产环境不显示
},
extensions: ['.vue', '.js', '.jsx', '.mjs', '.ts', '.tsx', '.json', '.css', '.scss']
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/common.scss";`
}
}
},
build: {
minify: 'terser',
sourcemap: false,
// 进行压缩计算
brotliSize: false,
modulePreload: false,
chunkSizeWarningLimit: 1000,
target: 'es2015', // 设置目标浏览器的最低版本
terserOptions: {
compress: {
// 打包自动删除console
drop_console: true,
drop_debugger: true
},
keep_classnames: true
},
rollupOptions: {
output: {
// 分包
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString()
}
}
}
}
},
plugins: [
vue(), //配置vue
viteCommonjs(),
vitePluginRequire(), //兼容require
viteCompression({
verbose: true, // 输出压缩成功默认即可
disable: false, //开启压缩(不禁用)，默认即可
deleteOriginFile: false, //删除源文件
threshold: 1024, //压缩前最小文件大小
algorithm: 'gzip', //压缩算法
ext: '.gz' // 生成的压缩包后缀
})
],
optimizeDeps: {
include: ['vue', 'vuex', 'sass', 'vue-router'],
exclude: ['fsevents']
}
})
package.json
"scripts": {
"dev": "vite",
"build": "vite build",
"build-dev": "vite build --mode dev",
},代码优化
为保险起见，上面的东西配置好了之后，本地启动检查没问题，打包放到测试也没问题，接下来开始进行配置优化。
vue.config.js、webpack、vue/cli-service、babel多余的插件和配置开始逐步删除和卸载
删了发现还是正常可以跑的，自己检查没啥问题，就放心发到测试环境交给测试了
vite打包和启动问题汇总
1、The JSX syntax extension is not currently enabled
The esbuild loader for this file is currently set to "js" but it must be set to "jsx"
to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
如果是在.vue文件中带有jsx语法, 则在script标签下增加该标识
//.vue文件