The migrated project of this article is based on vue2. X + elementui + VUUE – CLI (vuue -admin)

The primary task

• Install vite

• Create the viet.config.js file

import { defineConfig } from 'vite'

export default defineConfig({})

Copy the code

index.html

Vue – cli mode

In vue-CLI, the index. HTML file is stored in a public file

Vite way

Put index.html directly in the root directory

change

• Drag the index.html file under public directly out of the root directory

• Add a

Script SRC points to the mainjs entry.

Change (Plan 2)

You might not want to drag index.html out under public

Vite serve some/sub/dir(index. HTML). You can also directly modify the root configuration in vite

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

Copy the code

See here for details

vue2

To support vue2. X in Vite, you need to install the plugin vite-plugin-vue2

Change vite. Config. Js

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

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

Copy the code

The interface agent

Add the viet.config.js configuration

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

Don’t proxy the ‘/’ root directory directly, it will jump to the target link, you must prefix it with rewrite.

jsx

If your project uses JSX, it needs to be configured as well. Just modify the viet-plugin-vue2 plugin here.

Add the viet.config.js configuration

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

See more configurations here

Sass syntax

The vite build will cause /deep/ to fail, so change all /deep/ to ::v-deep.

svg

Previous vuE-CLI configuration

vue.config.js

Registering SVG Components

vite

vite.config.js

import icons from 'vite-plugin-svg-icons'
export default defineConfig({
  ...
  plugins:[
    icons({
      iconDirs: [path.resolve(process.cwd(), 'Your SVG path (SRC/ICONS/SVG)')].symbolId: 'icon-[dir]-[name]'})]})Copy the code

Registering SVG Components

This may seem a lot leaner, but it’s important to add:

import ‘vite-plugin-svg-icons/register’

import ‘vite-plugin-svg-icons/register’

import ‘vite-plugin-svg-icons/register’

See more configurations here

path

Path builds in Vite and it will report errors, so you can’t use this directly.

import path from 'path' 
Copy the code

change

import path from 'path-browserify'
Copy the code

require.context

Require. context is no longer available in Vite because this is the method provided by Webpack.

In vite, use import.meta.globeager () instead.

For example

In vue-CLI we might register some global components in this way

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
Copy the code

In Vite you should write this

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

router

In VUe2, we register the route, which is how we normally register the route

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

However, you can’t use the import() method directly in Vite, which is also provided by WebPack.

In vite, use import.meta.glob() instead. It will return an object like this, and it’s up to you to do what you do with it.

Here’s a simple example:

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

Copy the code

env

Environment variables, in vue-CLI, start with VUE_, in Vite with VITE_.

Example:

To get a variable in a VUE file, write like this.

import.meta.env.VITE.xxx.xx
Copy the code

hmr

Hot update is enabled by default. Sometimes, hot update fails. Here’s a summary of why.

• The routing path must have the same name (case and case) as the component file; otherwise, hot updates will fail

• Dynamically added slots that change the slot contents in the parent component fail to be hot updated, so avoid this situation.

If your hot update fails, check the above.

Path shorthand, save the file suffix

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

Vue suffix is not officially recommended. I take it because it is an old project and there are many files, so it is not practical to change it one by one.

See here for details

require

In vue-cli, require() is used to load image resources, but in Vite, it is not possible to write this:

import imgUrl from 'Picture path'

export default {
    data:{imgUrl}
}

Copy the code

publicPath

In vue-CLI, there is a publicPath configuration. This configuration is not handled properly, resulting in the problem that resources cannot be found after packaging.

This configuration corresponds to the Base configuration in Vite. Just copy the previous publicPath configuration.

export default defineConfig({
  base: '/'
 })
Copy the code

Modify the package. The json

Finally, don’t forget to change the script of package.json.

."scripts": {
  "vite:dev": "vite"."vite:build": "vite build"."vite:staging": "vite build --mode staging"}...Copy the code

After migration, the construction speed is compared before and after

It’s still pretty obvious.

Production environment concerns?

Some of you will feel that Vite is not stable, not yet mature, in the production environment is so so; So there are people who use Vite in development and WebPack in production, and that’s fine, but there’s a cost to maintaining two sets of code, because the syntax for WebPack is variable on Vite, it’s not consistent; I think vite is now 2.X version, the society is still so active, there are any problems to go around the circle back estimated to have a solution, to migrate completely, do not be afraid of wolves, afraid of tigers.

The last

To optimize the configuration, to add configuration, go to the official documentation.

If you ask me how to get started with Vite, read the official documentation.

If you ask me how to advance vite, see vite source code.

To sum up a word: see much, it is better to do it.

Welcome rational discussion, radical can not call names!!