vue2旧项目迁移到vite开发,提升编译效率
旧项目太庞大,每次开发都很费时间,保存预览一次需要3-4s的时间。已经升级用 webpack4的情况下,项目最早是 webpack3,编译一次,7-10s的时间,大大影响效率。想着再用vite升级一下开发效率。
·
旧项目太庞大,每次开发都很费时间,保存预览一次需要3-4s的时间(首次编译时间2min)。已经升级用 webpack4的情况下,项目最早是 webpack3,编译一次,7-10s的时间,大大影响效率。
想着再用vite升级一下开发效率
迁移准备
- 备份项目很重要
- 在工作项目不是很忙的时间段,升级
- 随时能google
开始升级
安装vite及相关依赖
yarn add -D vite\
@vitejs/plugin-vue2\ # 支持vue2 @vitejs/plugin-vue 支持vue3,本文是基于vue2升级
@originjs/vite-plugin-require-context\ # 兼容webpack里面的require.context()
vite-plugin-dynamic-import\ # 兼容 import('@views/' + path) 把@转成绝对路径去动态引入
@originjs/vite-plugin-commonjs # 扩展支持 commonJS
新建配置vite.config.js
import { resolve } from 'path'
import fs from 'fs'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue2' // 官方支持的vue2插件
// 兼容webpack里面的require.context() 把require.context() 转成 import ... from ...的方式
import viteRequireContext from '@originjs/vite-plugin-require-context'
// 兼容 import('@views/' + path) 把@转成绝对路径去动态引入
import dynamicImport from 'vite-plugin-dynamic-import'
// 扩展支持 commonJS
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
/* 如果 node version >= 16,获取当前脚本执行路径需要这样设置
import { fileURLToPath } from 'url'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
function resolvePath(str: string) {
return path.resolve(__dirname, str)
} */
function resolvePath(str) {
return resolve(__dirname, str)
}
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
// 根据当前工作目录中的 `mode` 加载 .env 文件
// 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。
const env = loadEnv(mode, process.cwd(), '')
return {
base: mode === 'production' ? '/fun/admin/' : '/',
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.vite.html'),
},
},
},
css: {},
define: {
'process.env': env,
__APP_ENV__: env.APP_ENV,
},
plugins: [
vue(),
viteCommonjs(),
viteRequireContext(),
dynamicImport(),
],
resolve: {
extensions: ['.vue', '.js', '.mjs', '.ts', '.jsx', '.tsx', '.json'],
alias: {
vue$: resolvePath('./node_modules/vue/dist/vue.esm.js'),
'@': resolvePath('./src'),
'@assets': resolvePath('./src/assets'),
},
},
server: {
fs: {
strict: false,
},
port: 8086,
host: '0.0.0.0', // 指定服务器应该监听哪个IP地址,如果将此设置成'0.0.0.0'将监听所有地址
strictPort: false, // 设为 true 时若端口已被占用则会直接退出,而不是尝试下一个可用端口。
open: false,
proxy: {
'/api': {
target: 'http://example.com', //
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
},
}
})
将public下边的index.html复制一份放到根目录,跟vite.config.js同级。然后在里面引入项目入口文件main.js,修改里面引入其他文件的路径
<script type="module" src="./src/main.js"></script>
在 package.json 里面 添加 运行 vite 的 脚本
遇到问题
1. babel 依赖过久,需要升级
2. 页面报错,显示需要使用带编译模板的vue版本
解决方法:修改main.js中的App.vue组件引入方式。
new Vue({
el: '#app',
router,vue
// 原 component template引入
components: { App },
template: '<App/>'
})
复制代码
new Vue({
el: '#app',
router,
// 改为 render
render: h => h(App)
})
3. 入口文件不是index.html,或者不在根目录,导致资源报错404.
-
vite官网说明:vite本质是启动一个基于项目目录的静态服务器,所以非index.html的入口文件只需要在url后跟上相应的html路径就行了
index.html => ip:port start.html => ip:port/start.html /vite/index.html => ip:port/vite/index.html
这样开发环境就可以访问了,然后解决打包问题,需要修改vite.config.js中的build.rollupOptions配置
// 以start.html为例 build: { rollupOptions: { input: process.cwd() + '/start.html' } }
更多推荐
所有评论(0)