Vue2老项目使用vite2升级
基础配置
- 安装npm包
npm install vite -D
npm install @vue/compiler-sfc -D
npm install vite-plugin-vue2 -D
- 新建vite.config.js
import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
import {resolve} from 'path'
function pathResolve(dir) {
return resolve(process.cwd(), '.', dir)
}
// vite.config.js
export default defineConfig({
server: {
host: '0.0.0.0',
},
plugins: [
createVuePlugin({
vueTemplateOptions: {}
}),
],
resolve: {
extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
alias: {
// vue2项目别名一般都是@，vue3中一般使用/@/, 为方便使用
'@': resolve('src')
}
}
})
- 给index.html增加main.js入口
<script type="module" src="/src/main.js"></script>
遇到的一些问题和解决方案
文件后缀省略导致页面报错404(例：vue文件引入时，webpack只需要文件名)，在vite.config.js配置resolve.extensions中添加对应后缀，vite默认有['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']。
-
页面打开显示报错
image-20210817151252577.png解决方法：修改main.js中的App.vue组件引入方式。
new Vue({
el: '#app',
router,
// 原 component template引入
components: { App },
template: '<App/>'
})
new Vue({
el: '#app',
router,
// 改为 render
render: h => h(App)
})
-
入口文件不是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'
}
}
