文章目录
-
- 步骤
-
- 1、安装vite相关的包
- 2、新建vite.config.js
- 3、index.html引入main.js
- 4、main.js引入App.vue方式调整
- 5、调整自定义模块、路由引入方式：require -> import、export default
- 6、script添加命令
- 参考资料
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的
参考资料
Vue2老项目使用vite2升级
动态路由多种方式