老项目将VUE2.0项目vue-cli配置改造成vite项目配置

vite介绍

vite是尤大大开发的一款新的提供项目基本的脚手架和开发服务器的构建的工具。它不同于webpack做到了本地快速开发启动，模块热更新，按需编译，有无需等待整个项目编译完成的优势。原理是利用浏览器现在已经支持es6的import，根据项目实际加载需要，遇到import才会发送一个http去服务端请求加载文件。

背景

目前在公司维护一个之前开发以VUE2.0为基础采用vue-cli打包的项目。因为经过后面的业务需求开发迭代，使得目前项目像滚雪球似的慢慢变得很大。导致目前项目打包速度很慢，通常编译需要等待最少30秒以上，有时修改一行代码，就需要等很长时间，极大的影响了开发效率。所以，想基于vite开发快速启动后，模块热更新，按需编译的优势，对老项目进行升级。以下是我改造的全过程，希望对大家有所帮助。

正文

第一步

首先由于vue2.0项目，入口文件index.html是放在public文件夹底下，此时需要将index.html放到根目录中（与package.json文件同级），如图。

 

 接下来在index.html中给vite添加入口：

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

如下图所示：

第二步：

修改package.json文件中devDependencies，删除 @vue/cli-service 依赖项，并替换为 vite，这里我引用的是：

"vite": "^2.4.4",

 如图：

同时也可以删出 @vue/cli-plugin-***开发的依赖项；

 

第三步：

将原有版本vue.config.js修改为vite.config.js。编译vue2.0项目模板需要引入vite-plugin-vue2依赖具体配置如下：

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

const _resolve = (dir) =>  path.resolve(__dirname, dir);
export default defineConfig({
  base: './', //访问路径
  plugins: [
    createVuePlugin(),
  ],
})

 如果项目中存在'@'路径别名可以添加如下配置：

import path from "path";
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

const _resolve = (dir) =>  path.resolve(__dirname, dir);
export default defineConfig({
  base: './', //访问路径
  plugins: [
    createVuePlugin(),
  ],
  resolve: {
    alias: {
      '@': _resolve('src'),
      '_c': _resolve('src/components')
    }
  }
})

如果项目中后端服务请求存在多个请求api，添加请求代理时，可加入如下配置：

import path from "path";
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

const _resolve = (dir) =>  path.resolve(__dirname, dir);
export default defineConfig({
  base: './', //访问路径
  plugins: [
    createVuePlugin(),
  ],
  resolve: {
    alias: {
      '@': _resolve('src'),
      '_c': _resolve('src/components')
    }
  },
   server: {
    host: '0.0.0.0',
    port: 9100, // 设置服务启动端口号
    open: false, // 设置服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    // 设置代理，根据项目实际情况配置
    proxy: {
      "/testapi":{
        target: 'https://***.***.**/testapi/',
        changeOrigin: true,
        rewrite: (path) => path.replace('/testapi/', '/')      
      },
      '/baseapi': {
          target: 'https://***.***.**/baseapi/',
          changeOrigin: true,
          rewrite: (path) => path.replace('/baseapi/', '/') 
      }
    }
  }
})

需要注意的是项目中引入组件的方式需要修改，需要给后面添加'.vue'的文件后缀。否则vite编译会报错，如下所示：

//错误引用
import FormList from '@/components/FormList'

//正确引用
import FormList from '@/components/FormList.vue'

第四步：

修改环境变量，vite不识别process.env，需要替换为import.meta.env。如下图所示：

//错误示范
const isProduction = process.env.NODE_ENV === 'production'

//正确示范
const isProduction = impot.meta.env.NODE_ENV === 'production'

需要注意的是，要确保process.env.NODE_ENV = 'production'生效，需要在根目录设置.evn文件进行设置。

可以根据项目实际需要进行自定义配置，在package.json中通过配置scrtpt来读取不同的配置文件：

  "scripts": {
    "serve": "vite --mode dev.internet",
    "build": "vite build  --mode pro.internet"
  },

此时自定义环境变量不能再像以前一样，为它们加上前缀VUE_APP，而需要修改使用VITE。

//vue-cli配置
VUE_APP_TITLE="XXXXXX业务系统"
VUE_APP_TYPE="bank"

//vite配置
VITE_APP_TITLE="XXXXXX业务系统"
VITE_APP_TYPE="bank"

//项目中vite引用全局自定义
import.meta.env.VITE_APP_TITLE

第五步：

在项目中有使用动态路由的需求，需要注意vite会在编译过程中，遇到The above dynamic import cannot be analyzed by vite 的错误，无法进行动态懒加载。

vite针对动态引入提供了两种方式：

1. import.meta.glob: 通过动态导入默认懒加载，通过遍历加 then 方法可拿到对应的模块文件详情信息。

2. import.meta.globEager:通过直接引入所有模块，import进行引入。

这里我用的第一种方法如下：

const modules = import.meta.glob('../views/*/*.vue')
// 懒加载组件
function lazy (name) {
  if(name==='main'){
    return () => import('@/views/main')
  }else{
    let folder = name.split('_')[0]
    let file = name.split('_')[1]
    return modules[`../views/${folder}/${file}.vue`]
  }
}
export {lazy}

vite打包配置：

vite在打包过程中，vite默认打包模块大小是500k，如果打包出来的文件超过500k则会遇到如下问题：

 这时需要你在打包过程中加入如下配置将打包限制大小增加：

chunkSizeWarningLimit:1024,

也可以进行分割打包，将大块分成更小块

    rollupOptions: {
        output:{
          manualChunks(id) {
            if (id.includes('node_modules')) {
              //可用于查看vite打包输出的依赖包有哪些
              // console.log(id,"======")
              // return "wq";
              //分解块，将大块依赖包分解成更小的块
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
        }
      }
    }

我的vite.config.js打包的总体配置如下:

  build: {
    target: 'es2015',
    chunkSizeWarningLimit:1024,
    rollupOptions: {
        output:{
          manualChunks(id) {
            if (id.includes('node_modules')) {
              //可用于查看vite打包输出的依赖包有哪些
              // console.log(id,"======")
              // return "wq";
              //分解块，将大块依赖包分解成更小的块
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
        }
      }
    }
  },

效果展示：

vite编译时间展示，比以前快很多：

vite配置疑问：

vite打包出来的结果js和css是在同一个文件夹中，应该如何配置可以使js,css打包结果进行分离到各自文件夹中。预期打包结果如下图所示：

有哪位大牛做过这样配置，希望给与指点，谢谢。也欢迎大家一起交流，沟通。