Vue2老项目使用vite2升级

Vue2老项目使用vite2升级

基础配置

1. 安装npm包

npm install vite -D
npm install @vue/compiler-sfc -D
npm install vite-plugin-vue2 -D

2. 新建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')
    }
  }
})

3. 给index.html增加main.js入口

遇到的一些问题和解决方案

1. 文件后缀省略导致页面报错404(例：vue文件引入时，webpack只需要文件名)，在vite.config.js配置resolve.extensions中添加对应后缀，vite默认有['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']。

2. 页面打开显示报错

   
   
   image-20210817151252577.png

   解决方法：修改main.js中的App.vue组件引入方式。

new Vue({
  el: '#app',
  router,
  // 原 component template引入
  components: { App },
  template: ''
})

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'
  }
}

已发掘金：https://juejin.cn/post/6997310696845213704