Vue 2 项目如何快速迁移 Vite 作为开发工具

深藏阁楼爱情的钟 2022-10-13 12:40 232阅读 0赞

![f61d651ee5b9c700fc27739c4245ff1b.gif][]

> 梁晓莹:  微医前端技术部 一只喜欢读书????&&游泳????????的猪猪女孩～????

### 当前版本 vite@2.3.7 ###

## 一. 适合什么项目迁移 ##

1.  使用 vue2 的系统
2.  内部系统 - 无需大型流量场景：因为 vite 更迭较快，导致系统需要定期改动基础功能，造成不稳定
3.  非 ssr 系统 - ssr 还有很多问题，暂且等社区丰富起来
4.  定期有人维护的系统
5.  对开发有痛点而想要改进：比如打包慢，冷启动慢，HMR 更新慢。。。。
6.  vite 生产环境用 rollup，但是改造成本大，提效不高，风险大，暂不建议使用。【本人愚见，大佬轻喷】

## 二.迁移步骤 ##

将会以内部系统作为案例改造, 开发用 vite，生产依旧保持 webpack。

1.  简单了解 vite 特性。有问题优先看vite 官网排查是否有更新或解决方案！！
2.  npm i vite@2.3.7 vite-plugin-vue2@1.6.2 vite-plugin-html@2.0.7 -D
3.  package.json 添加一个 script -- "vite": "NODE\_ENV=development vite"
4.  关键在于配置 vite.config.js【默认叫做这个文件名，你可配置成其他的。。】

import { defineConfig } from 'vite';
    import path from 'path';
    import fs from 'fs';
    
    import { createVuePlugin } from 'vite-plugin-vue2';
    import { injectHtml, minifyHtml } from 'vite-plugin-html';
    import { cjs2esmVitePlugin } from 'cjs2esmodule'
    import dotenv from 'dotenv'
    const config = require('./config')
    
    try {
      // 根据环境变量加载环境变量文件
      const file = dotenv.parse(fs.readFileSync(`./config/.env.${process.env.NODE_ENV}`), {
        debug: true
      })
      console.log(file)
      // 根据获取的 key 给对应的环境变量赋值
      for (const key in file) {
        process.env[key] = file[key]
      }
    } catch (e) {
      console.error(e)
    }
    const API_LOCATION = process.env.API_LOCATION || '/api'
    
    function resolve(dir) {
      return path.join(__dirname, './', dir)
    }
    export default defineConfig({
      root: './', // 项目根目录（index.html 文件所在的位置）可以是一个绝对路径，或者一个相对于该配置文件本身的相对路径。
      publicDir: 'public', // 作为静态资源服务的文件夹.该值可以是文件系统的绝对路径，也可以是相对于项目的根目录的相对路径。
      base: './', // 公共基础路径。改值可以是绝对路径或空字符串
      mode: 'development',
      optimizeDeps: { // 要预构建的第三方依赖
        include: []
      },
      resolve: {
        alias: {
          // 'vue': 'vue/dist/vue.esm.js', // 如果是模板解析的 - 使用这个 vue：内部为正则表达式  vue 结尾的
          'vendor': resolve('src/vendor'),
          '@': resolve('src'),
          '~@': resolve('src'),
          '~component': resolve('src/components'),
          '~config': resolve('config'),
        }
      },
      plugins: [
        cjs2esmVitePlugin(), // 将 commonjs 转化为 es module： 有报错
        createVuePlugin({
          jsx: true,
          jsxOptions: {
            injectH: false,
          },
        }),
        minifyHtml(), // 压缩 HTML
        injectHtml({ // 入口文件 index.html 的模板注入
          injectData: { // 模板注入的数据
            htmlWebpackPlugin: {
              options: {
                isVite: true,
                shotcut: '/static/img/favicon.png',
              }
            },
            title: 'HMO 运营后台',
          },
        }),
      ],
      define: {
        'process.env': process.env
      },
      server: {
        host: 'liang.myweb.com',
        open: true, // 是否自动打开浏览器
        port: process.env.PORT || config.dev.port,
        proxy: {
          [API_LOCATION]: {
            target: 'http://127.0.0.1:8001',
            rewrite: (path) => path.replace(API_LOCATION, '')
          }
          
        }
      },
    });

## 三.常用问题【踩坑日记????】 ##

#### 1. vite 目前要求入口文件必须是根目录下的 index.html，如果之前的 webpack 入口文件同名，需要更改。 ####

解决方案：vite.config.js:

import { injectHtml } from 'vite-plugin-html';
    export default defineConfig({
      plugins:[
        injectHtml({ // 入口文件 index.html 的模板注入
          injectData: { // 模板注入的数据
            htmlWebpackPlugin: { // 取和 webpack 插件同名的对象 key，即可
              options: {
                isVite: true,
                shotcut: '/static/img/favicon.png',
              }
            },
            title: 'HMO 运营后台'
          },
        })
      ]
    })

webpack.xxx.js

new HtmlWebpackPlugin({
      template: 'index.html',
      inject: true,
      isVite: false // 添加标识
    })

根目录入口文件 index.html - ejs 模板

<% if (htmlWebpackPlugin.options.isVite) { %>
          <script type="module" src="/src/main.js"></script>
          <%}%>

#### 2. 新版本报 xx 错：可切换旧版本，如 vite@2.2.3 ####

#### 3.没有导出命名？ ####

> Uncaught SyntaxError: The requested module '/config/index.js' does not provide an export named 'default'Uncaught SyntaxError: The requested module '/config/index.js' does not provide an export named 'default'

![4bcf96b5ced409f4a91cfaafa66bac38.png][]错误原因：浏览器仅支持 esm,不支持 cjs vite.config.js

import { cjs2esmVitePlugin } from 'cjs2esmodule'
    export default defineConfig({
      plugins: [
       cjs2esmVitePlugin(), // 将 commonjs 转化为 es module
      ]
    })

如果有 require.xx 的按需加载写法还可以修改成 import 的，案例如下：

const subjectList = r => require.ensure( [], () => r(require('@/pages/xxx/subject/list.vue')), 'subject' );
    
    // 改为：Vue 动态组件 component: ()=>import()
    
    const subjectList = () => import(/* webpackChunkName: "subject" */ '@/pages/xxx/subject/list.vue')
    const arr = [
      {
        path: '/subject/list',
        name: 'subject/list',
        component: subjectList
        meta: {...}
      }
    ];
    export default arr;

#### 4. proxy 使用 http-proxy。完整选项详见 此处. ####

案例：

proxy: {
          '/rest': {
            target: 'http://my.web.com/',
            changeOrigin: true,
            bypass: (req, res, proxyOption) => {
              console.log(`当前请求代理：${req.url} -> ${proxyOption.target}`);
            },
          },
        }

#### 5. ts 文件报错？ ####

验证是否配置了 vite 的 ts 处理

"compilerOptions": {
      "types": ["vite/client"]
    }

#### 6. 全局环境变量报错？ ####

// const isProd = ENV === 'production'; // webpack - dev 环境变量
    // const isProd = import.meta.env.PROD; // vite - dev 环境变量
    // 可以避开上面????????的，采用 NODE_ENV 来区分：
    const isProd = process.env.NODE_ENV === 'production';
    
    那么我们启动的时候："dev": "NODE_ENV=development vite"

或者可以探索一下社区的 babel 插件：babel-preset-vite【包含以下两个功能】babel-plugin-transform-vite-meta-envbabel-plugin-transform-vite-meta-glob

#### 7. 看一些打印出来的日志&错误等？ ####

cli --debug，或者 vite.config.js 配置打印相关参数

#### 8. 引入文件，比如.vue 的时候，不可以省略扩展名？ ####

是的！！！不是他们不会做，是他们不想做????，就是这么设计的，具体请戳这里, 尤大佬推特解释然后加上 resolve.extensions: \['.vue'\] 直接在控制台报错：所以没用。。。

> error: No loader is configured for ".vue"

害！老老实实加上扩展名！【在线????】 方便的全局加上扩展名方法如下：链接![723d02d42d679bc11d9179a7aa97c82e.png][]

#### 9. less 文件找不到？ ####

> \[vite\] Internal server error: '~@/styles/var.less' wasn't found.

（1）确定已经支持 less：`npm install -D less`（2）别忘了 resolve.alias 也加上一个：`'~@': resolve('src')`

#### 10. 如何支持 jsx? ####

vite.config.js

import { createVuePlugin } from 'vite-plugin-vue2';
    createVuePlugin({
      jsx: true, // 配置 jsx
      jsxOptions: {
        injectH: false,
      },
    })

Vue.component('my-component',{
     render () {
       return (<div>my template</div>)
      }
    })

#### 11. 根据环境变量配置代理？ ####

（1）cross-env 来跨平台设置环境变量

> ### 1. 安装 cross-env ###
> 
> npm i cross-env -D

（2）加载环境变量文件。它能将环境变量中的变量从 .env 文件加载到 process.env 中

> ### 2. 安装 dotenv ###
> 
> npm i dotenv -D

（3）config/.env.development 配置变量

NODE_ENV = development
    API_LOCATION = /api
    LOGOUT_PC_LOCATION = http://user.myweb.com/login
    CRM_ADDRESS = http://crm.myweb.com

（4）配置 vite.config.ts

try {
      // 根据环境变量加载环境变量文件
      const file = dotenv.parse(fs.readFileSync(`./config/.env.${process.env.NODE_ENV}`), {
        debug: true
      })
      console.log(file)
      // 根据获取的 key 给对应的环境变量赋值
      for (const key in file) {
        process.env[key] = file[key]
      }
    } catch (e) {
      console.error(e)
    }
    const API_LOCATION = process.env.API_LOCATION || '/api'
    ..... 此处省略
    
    export default defineConfig({
      server: {
        proxy: {
          [API_LOCATION]: {
            target: 'http://127.0.0.1:8001',
            rewrite: (path) => path.replace(API_LOCATION, '') // 根据环境变量配置代理
          }
    
        }
      }
    })

（5）package.json 启动 script

"vite": "cross-env NODE_ENV=development vite"

#### 12. 环境变量报错？ ####

原来 webpack 使用的环境变量 process.env，vite 没有这个，所以报错

> Uncaught ReferenceError: process is not defined

vite 使用的时候`import.meta.env`, 但是我们老的代码不想动怎么办？其实 vite 也还是留了口子给我们定义全局变量\[类型不能是 function\]

export default defineConfig({
      // ...
      define: {
        'process.env': {}
      }
    })

#### 13. anything else? ####

..... bug 无止境，很多都是非通用问题，都是引入 vite 后发现的系统本身的一些问题，这里就不一一举例了。后续会追踪更多通用问题

往期推荐

[![d4485a3e5f7dda43a5c37a09826629fb.png][]][d4485a3e5f7dda43a5c37a09826629fb.png 1]

[Vite 太快了，烦死了，是时候该小睡一会了。][d4485a3e5f7dda43a5c37a09826629fb.png 1]

[![c6c0d60e56901d382e6ed9df0ba46493.png][]][c6c0d60e56901d382e6ed9df0ba46493.png 1]

[如何实现比 setTimeout 快 80 倍的定时器？][c6c0d60e56901d382e6ed9df0ba46493.png 1]

[![d705768569b25007c9f49f5ff09e363c.png][]][d705768569b25007c9f49f5ff09e363c.png 1]

[万字长文！总结Vue 性能优化方式及原理][d705768569b25007c9f49f5ff09e363c.png 1]

[![855fa33053936b174bebcd792d273201.png][]][855fa33053936b174bebcd792d273201.png 1]

[90 行代码的 webpack，你确定不学吗？][855fa33053936b174bebcd792d273201.png 1]

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点个「**在看**」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -\_-）
2.  欢迎加我微信「huab119」拉你进技术群，长期交流学习...
    
    关注公众号「**前端劝退师**」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
3.

![18e69c94a600a5efa6f3bb3fcca447a1.png][]

点个在看支持我吧，转发就更好了

[f61d651ee5b9c700fc27739c4245ff1b.gif]: /images/20221005/00730e6d0859421ca3dd694e65ea6447.png
[4bcf96b5ced409f4a91cfaafa66bac38.png]: /images/20221005/0f6fbb08335d4827b59795425423fc7b.png
[723d02d42d679bc11d9179a7aa97c82e.png]: /images/20221005/8886de1a0cf1414786c96b4de9a60317.png
[d4485a3e5f7dda43a5c37a09826629fb.png]: /images/20221005/5b17d1e51ae34cf98b17df1ee0a4b799.png
[d4485a3e5f7dda43a5c37a09826629fb.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c24fb1deb5c6a70410889666afec7da71e77e5ab4b17b7677a22a554fdc9ee2f3d97006322&idx=1&mid=2247487534&scene=21&sn=947df5483ab7508f8d2f9abd8c2f11a8#wechat_redirect
[c6c0d60e56901d382e6ed9df0ba46493.png]: /images/20221005/4cf6af00688f4272887040c49604e756.png
[c6c0d60e56901d382e6ed9df0ba46493.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c25151deb5d847686e17e267e9659124dd4250f9df681564ce87a55190625bfd49adc02661&idx=1&mid=2247487182&scene=21&sn=ae83a65d4e6a9ee8b3b98a4cbe20c96b#wechat_redirect
[d705768569b25007c9f49f5ff09e363c.png]: /images/20221005/79b543c4c0ee4646b56786a6aa0fbf7f.png
[d705768569b25007c9f49f5ff09e363c.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c251e2deb5d8f455c581ddaf84a503c912d4bc2def725105fdf7442af6df6c6af0dee01b7b&idx=1&mid=2247487101&scene=21&sn=92c60dd47cf94731829bf006cd2b5e36#wechat_redirect
[855fa33053936b174bebcd792d273201.png]: /images/20221005/7f37cda86f9245ef82d7ecd66dcf92cc.png
[855fa33053936b174bebcd792d273201.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c24f0adeb5c61c4c64564fa3ef07fae165e0ba9c115c5846db1a94cd97f5f101e764c9b604&idx=1&mid=2247487637&scene=21&sn=bb353093eee2f07cfcfc7e4ad460ce7f#wechat_redirect
[18e69c94a600a5efa6f3bb3fcca447a1.png]: /images/20221005/7c53840cbbe9453cbffede9dca4ef41b.png