vue-cli项目改造vitevue-cli项目改造成 vite项目，由于低版本的vue-cli使用的是webpack打

使用vite改造webpack打包

更改vue版本

先将 vue@2.6.11 升级为 vue@2.7.0；因为 @vitejs/plugin-vue2 最低支持2.7.0

安装依赖

yarn add -D vite 
@vitejs/plugin-vue2 
@originjs/vite-plugin-require-context 
vite-plugin-dynamic-import  
@originjs/vite-plugin-commonjs 
@vitejs/plugin-basic-ssl
@vitejs/plugin-legacy
terser

添加`vite.config.js`

import { resolve } from 'path'
import fs from 'fs'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue2' 
// 解决 require.context 报错
import viteRequireContext from '@originjs/vite-plugin-require-context'

// 自动生成 https证书
import basicSsl from '@vitejs/plugin-basic-ssl'


import legacy from '@vitejs/plugin-legacy'


//  解决动态导入，即 动态 import的
// import dynamicImport from 'vite-plugin-dynamic-import'

// 解决 resuire 的问题 因为 vite 支持的是 ESM
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

function resolvePath(str) {
  return resolve(__dirname, str)
}



export default defineConfig(({ command, mode }) => {
  
    //   loadEnv 加载 .env 文件 这里使用 寻常的 import.meta.env 会报错
  const ENV = loadEnv(mode, process.cwd(), '')
  console.log('ENV.VITE_BASE_URL',ENV.VITE_BASE_URL)
  return {
    base:  '/',
    build: {
        // rollup 的自选配置项
      rollupOptions: {
        // https://www.rollupjs.com/guide/big-list-of-options 简述一下就是bundle的入口文件
        input: {
          main: resolve(__dirname, 'index.html'),
        },
      },
      commonjsOptions: {
        transformMixedEsModules: true
    }
    },
    css: {},
    plugins: [
      vue(),
      viteCommonjs(),
      viteRequireContext(),
      basicSsl(),
      legacy({
        targets: ['defaults']
      })
    //   dynamicImport(),
    ],
    resolve: {
      extensions: ['.vue', '.js', '.mjs', '.ts', '.jsx', '.tsx', '.json'],
      alias: {
        '@': resolvePath('./src'),
      },
    },
    server: {
      fs: {
        strict: false,
      },
      port: 8088,
      host: '0.0.0.0', 
      strictPort: false, 
      open: false,
      cors: true,
      proxy: {
        '/v1/admin/': {
          target: `${ENV.VITE_BASE_URL}`, 
          changeOrigin: true,
      },
    },
  }
}})

更改入口文件

将public中的index.html 移动到src同级的目录下

<script type="module" src="/src/main.js"></script>

处理环境变量

vite的环境变量跟vue-cli的环境变量定义基本相同，但是有两方面不同：

vite中需要使用的环境变量需要使用VITE_作为前缀
vite中使用环境变量为：import.meta.env.VITE_KEY

命令相关：

可以根据vite内的命令去做自己需要的功能，例如：

    "local:dev": "vite --https --mode dev",  // 本地的local化境 对接uat服务 默认开始https
    "local:uat": "vite --mode uat", // 本地的local化境 对接dev服务
    "build": "vite build"  // 生产环境打包

部署

当我们本地运行OK之后就可以进行部署了；由于vite 只能支持 node 14.x或者 16.x以及以上版本，所以我们还需要在 .gitlab-ci.yml 上使用nvm 进行 node版本的固定

nvm use v16.18.1  // 在 npm run build 前 加上这一行

疑难杂症处理

打包了之后报错：require is not defined，解决：将require换成ESM
兼容IE：我们需要在@vitejs/plugin-legacy中添加相关的配置完成兼容IE 除了@vitejs/plugin-legacy之外我们还需要安装一个依赖npm i terser -D
```
  legacy({
    targets: ['defaults','IE 11'],
    additionalLegacyPolyfills:['regenerator-runtime/runtime']
  })
```
开启HTTPS，在vue-cli中我们通过对devServe使用https:true开启https并配置默认证书，在vite中我们需要使用@vitejs/plugin-basic-ssl开启https

vue-cli项目改造vite