迁移vue-cli到vite吗？我把坑都给你踩了。

Protego
9,997 阅读4分钟

本文章迁移的项目是基于vue2.x + elementui + vue-cli（vue-admin）

首要任务

  • 安装vite

  • 创建vite.config.js文件


import { defineConfig } from 'vite'

export default defineConfig({})

index.html

vue-cli方式

在vue-cli，index.html文件是存放在public文件下的

vite方式

直接将index.html放在根目录

改

  • 直接将public下的index.html拖出来根目录

  • 在index.html里面添加一条<script type="module" src="/src/main.js"></script>

script的src指向mainjs入口（看自己项目main的位置修改地址）

改(方案二)

有可能你会不想将index.html在public下拖出来

那你打包的命令就稍微改一下vite serve some/sub/dir(index.html位置),也可以直接修改vite.config中的root配置


export default defineConfig({
    root:'xxxx'
})

详情看 这里

vue2

要想vite支持vue2.x就要安装一个插件vite-plugin-vue2

改vite.config.js


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

export default defineConfig({
  plugins:[
    createVuePlugin()
  ]
})

接口代理

添加vite.config.js配置

export default defineConfig({
  ...
  server: {
    proxy: {
      '/api': {
        target: 'http://baidu.com/',
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

不要直接代理'/'根目录,它会自己跳到target链接，必须加个前缀，再rewrite就好了。

jsx

如果你的项目有用到jsx，也需要配置一下，这里只需要修改一下vite-plugin-vue2插件。

添加vite.config.js配置

export default defineConfig({
  ...
  plugins:[
    createVuePlugin(
      {
        jsx:true
      }
    )
  ]
})

更多配置看 这里

sass语法

vite构建会导致/deep/报错，要将所有的/deep/改成::v-deep。

svg

之前vue-cli的配置

vue.config.js image.png

注册svg组件

image.png

vite

vite.config.js

import icons from 'vite-plugin-svg-icons'
export default defineConfig({
  ...
  plugins:[
    icons({
      iconDirs: [path.resolve(process.cwd(), '你的存放svg路径(src/icons/svg)')],
      symbolId: 'icon-[dir]-[name]'
    })
  ]
})

注册svg组件

image.png

是不是看起来精简了很多，但是这一句很重要，一定要加上：

import 'vite-plugin-svg-icons/register'

import 'vite-plugin-svg-icons/register'

import 'vite-plugin-svg-icons/register'

更多配置看 这里

path

path在vite构建它会报错的，所以不能直接用这个。

import path from 'path'

改

import path from 'path-browserify'

require.context

在vite中require.context已经不能再用了，因为这是webpack提供的方法。

在vite中要用import.meta.globEager()去代替。

举个例子

在vue-cli中我们可能会这样去注册一些全局组件

const modules = require.context('./', true, /\.vue$/);

const components = modules.keys().map((modulePath) => {
  const module = modules(modulePath);
  return module.default || module;
});

const install = function(Vue) {
  components.forEach((component) => {
    Vue.component(component.name, component);
  });
};

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default install

在vite中应该这样写


const install = function(Vue) {
  Object.values(import.meta.globEager('./**/*.vue')).forEach((component) => {
    Vue.component(component.default.name, component.default);
  })
}

export default install

router

在vue2中，注册路由，我们一般都会这样去注册路由

export default new Router({
  routes:[
    {
      path: '/xxx',
      component: () => import('/xxx'),
    }
  ]
})

但是在vite中不能直接用import()方法了，也会报错，这也是webpack提供的。

在vite中要用import.meta.glob()去代替。它会返回这样一个对象，怎么处理，那就看自己的业务了。

image.png

举个简单例子：


function loadView(view) {
  let modules = import.meta.glob(`../../views/**/**.vue`)
  let routerKey = `../../views${view}`
  return modules[routerKey]
}

env

环境变量，在vue-cli中，要以VUE_开头，在vite中就要以VITE_开头。

例子：

image.png

想在vue文件中拿到变量，要这样写。

import.meta.env.VITE.xxx.xx

hmr

热更新是默认开启，有时会出现热更新失效的问题。这里总结一下原因。

  • 路由路径要跟组件的文件严格同名（包括大小写），不然热更新会失效

  • 动态添加的插槽，在父组件更改插槽内容，热更新失效，所以要避免这种情况。

如果你热更新失效，检查以上问题。

路径简写，文件后缀省写

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  }
})

官方不推荐.vue后缀省略，我这里因为是老项目，都不带后缀，文件多，一个一个去改不现实，所以就带上了。

详情看这里

require

在vue-cli中会通过require()去加载图片资源，但是在vite中不能这样写了，要这样写：


import imgUrl from '图片路径'

export default {
    data:{imgUrl}
}

publicPath

在vue-cli中有个publicPath配置，这个配置处理得不妥当，会导致打包后找不到资源的问题。

这个配置在vite中对应的配置是base配置。将之前的publicPath配置复制过来就好。

export default defineConfig({
  base: './'
 })

修改package.json

最后不要忘了改package.json的script。

...
"scripts": {
  "vite:dev": "vite",
  "vite:build": "vite build",
  "vite:staging": "vite build --mode staging"
}
...

迁移完，构建速度前后对比

image.png

还是有很大的明显的。

生产环境顾虑？

有些同学会觉得vite还不稳定，还不成熟，在生产环境还怎么样怎么样；所以就会有人在开发环境用vite，在生产环境就用webpack,这样不是不行，但是你要维护两套代码是有成本的，因为webpack的语法，在vite上是有变动的，不是一致的；个人觉得vite现在都2.x版本，社会还那么活跃，有什么问题去走一圈回来估计都有解决方案了，要迁移就彻底一点，不要前怕狼，后怕虎的。

最后

要优化配置的，要添加配置的，自己去看官方文档。

如果问我要怎么入门vite,看官方文档。

如果问我要怎么进阶vite,看vite源码。

总结一句话：看得多，不如动手搞一搞。

欢迎理性讨论，可激进不可骂街！！！

avatar
文章
阅读
粉丝