文章目录
webpack打包项目过大,慢且容易内存溢出。哭唧唧
步骤
当前只是vite的开发环境踩坑,项目目前依旧保持webpack打包
vite需要node版本为12及以上,当前 v12.12.0
1、安装vite相关的包
npm install vite -D
npm install @vue/compiler-sfc -D
npm install vite-plugin-vue2 -D
2、新建vite.config.js
proxy 代理 rewrite而非pathWrite;cjs2esmVitePlugin 包将 commonjs 转化为 es module;resolve.extensions中添加对应后缀
import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
import {resolve} from 'path'
import { cjs2esmVitePlugin } from 'cjs2esmodule'
function pathResolve(dir) {
return resolve(process.cwd(), '.', dir)
}
export default defineConfig({
server: {
port: '7010',
proxy: {
'/user': {
target: 'http://localhost:8051/',
secure: true,
changeOrigin: true,
rewrite: path => path.replace(/^\/user/, 'user') // 路由这里vite用的是rewrite而非pathWrite,需注意调整
},
}
},
plugins: [
createVuePlugin({
vueTemplateOptions: {}
}),
cjs2esmVitePlugin(), // 将 commonjs 转化为 es module
],
resolve: {
// 文件后缀省略导致页面报错404(例:vue文件引入时,webpack只需要文件名),在vite.config.js配置resolve.extensions中添加对应后缀,vite默认有['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']。
extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
alias: {
// vue2项目别名一般都是@,vue3中一般使用/@/, 为方便使用
'@': resolve('src')
}
}
})
3、index.html引入main.js
<script type="module" src="/src/main.js"></script>
4、main.js引入App.vue方式调整
new Vue({
el: '#app',
router,
store,
render: h => h(App)
// template: '<App/>',
// components: {
// App
// }
});
5、调整自定义模块、路由引入方式:require -> import、export default
路由有三种动态引入方式,采用import方式
// component: resolve => require(['@/mods/voucher/container_community.vue'], resolve), // 导航
component: () => import(/* webpackChunkName: "container_community" */ '@/mods/voucher/container_community.vue'),
开发时,有一些组件引入公共文件require方式,调整为import引入
6、script添加命令
"vite": "vite",
"debug": "vite --debug", // 刚开始切换的时候还是很需要debug的