vue2项目升级vite，遇到的问题

本来是 vue2 的项目，现在需要用 vite 来编译运行；本来也是多入口应用，诸多配置需要更改；主要需要解决两个东西：①commonjs 的转换；② 多入口的适配

1. 安装相关依赖

npm install vite-plugin-vue2 vite-plugin-html vite -D

2. 添加 vite.config.js 配置项

import { resolve } from 'path'
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig(config => {
  return {
    mode: 'development',
    plugins: [
      createVuePlugin({
        jsx: true, // 这个配置貌似没有什么实际效果
        jsxOptions: {
          compositionApi: true
        }
      }),
      createHtmlPlugin({
        entry: 'src/main.js',
        template: 'public/index.html',
        // 如果是多入口的话，需要配置 pages 这个对象
        data: {
          htmlWebpackPlugin: {
            options: {
              title: config.title
            }
          }
        }
      })
    ],
    resolve: {
      extensions: ['.vue', '.js', '.jsx', '.ts', '.tsx', '.json', '.css', '.scss'],
      alias: [{ find: '@', replacement: resolve(__dirname, 'src') }]
    },
    server: {
      port: 3000,
      host: '127.0.0.1',
      proxy: {
        '/devapi': {
          pathRewrite: {
            target: 'http://localhost：3000',
            changeOrigin: true,
            '^/devapi/': ''
          }
        }
      }
    },
    define: {
      'process.env': {},
      exports: {}
    }
  }
})

3. 问题：

1. vite-plugin-html插件对于多入口文件项目来说，页面上访问的路由需要有变化，对比看一下vue.config.js和vite.config.js中多入口文件配置说明

vue.config.js

{
  pages: {
    index: {
      entry: 'src/pages/index/index.js',
      template: 'src/pages/index/index.html',
      filename: 'index.html' // localhost:8080/index.html#/xxx
    },
    setting: {
      entry: 'src/pages/setting/setting.js',
      template: '/src/pages/setting/setting.html',
      filename: 'setting.html' // localhost:8080/setting.html#/xxx
    }
  }
}

vite.config.js

{
  pages: [
    {
      entry: 'src/pages/index/index.js',
      template: 'src/pages/index/index.html',
      filename: 'index.html' // localhost:5173/src/pages/index/index.html#/xxx
    },
    {
      entry: 'src/pages/setting/setting.js',
      template: '/src/pages/setting/setting.html',
      filename: 'setting.html' // localhost:5173/src/pages/setting/setting.html#/xxx
    }
  ]
}

1. 第一个问题：vue.config.js中的 pages是一个对象，而vite.config.js中pages是一个数组
2. vue.config.js访问定义相关的路由是：localhost:8080/index.html/#/xxx，而vite.config.js中访问定义相关的路由是：localhost:5173/src/index/index.html/#/xxx；端口号这种可以设置，没什么影响，主要是访问的路径后面多了一长串的东西，这个我去vite-plugin-html插件的issue上看了，有人说是一个 bug，需要修改源码；将源码里面的configureServer下面有个rewrites.push(createRewire(page.template, page, baseUrl, keys));，将page.template改成page.filename

2. vue 实例的创建需要改成下面这种方式

new Vue({
  render: h => h(App)
}).$mount('#app')

3. 其他的一些说明

1. 如果使用了require动态导入资源（比如图片）要使用 new URL(资源路径, import.meta.url) 转换一下
2. 如果使用 process.env 读取环境变量，需要安装 dotenv 插件导入一下环境变量
3. 如果以前的环境变量是以 VUE_APP_ 开头的，可以配置一个别名 envPrefix: VUE_APP_
4. 如果使用了 modules.export={} 这种导出，报错误的话，需要将其改成 export default {} 即可
5. 如果报 exports 不存在，可以在 define 中配置 exports: {} 即可