The overview

Vite (French for “fast”) is a new front-end build tool that dramatically improves the front-end development experience. It mainly consists of two parts:

  • A development server that provides rich built-in features based on native ES modules, such as surprisingly fast module hot update (HMR).
  • A set of build instructions that use Rollup to package your code and that are pre-configured to output highly optimized static resources for production.

Vite is intended to provide out-of-the-box configuration, while its plug-in API and JavaScript API provide a high degree of extensibility and complete type support.

Foreword: The company’s old projects have been using Webpack, and faced with the complex build and standby build speed, it is true that some pain, so! Me!!!!!!! Inherit glorious and arduous task – Webpack migration vite

Dependencies needed:

 "vite-plugin-vue2": "^ 1.9.3." "."vite": "^ 2.8.1"."vue-template-compiler": "^ 2.6.12." "
Copy the code

The migration

  1. You need to put index.html in the root directory and remove %PUBLIC_URL% and some webpack configuration

  1. Modify vue.config.js to vite.config.js to introduce dependencies

import path from 'path'
import { createVuePlugin } from 'vite-plugin-vue2'
import { defineConfig } from 'vite'
Copy the code
  1. Configuration vite. Config. Js
export default defineConfig({
  optimizeDeps: {},
  publicDir: 'public'./ / public path
  base: '/'.// The packaged path
  build: {'// Package configuration'
    target: 'modules'./ / browser compatibility "esnext" | "modules"
    outDir: 'dist'.// Specify the output path
    assetsDir: 'assets'.// Generate the static resource storage path
    assetsInlineLimit: 4096.// Import or reference resources less than this threshold are base64 encoded inline to avoid additional HTTP requests. Setting this to 0 disables this item completely
    cssCodeSplit: true.// Whether to enable CSS splitting
    sourcemap: false.// Build the source map file
    rollupOptions: {} // rollup packages configuration
  },
  server: {
    port: 4000.strictPort: false.open: true.proxy: {
      '/api': {
        target: 'http://xxxxxx'.// API under the local IP or domain name
        changeOrigin: true.secure: true.agent: true.logLevel: 'debug'.ws: false.pathRewrite: {
          '^/api': '/'}}},hmr: {
      overlay: false}},css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${resolve('src/assets/style/xxx.less')}"; `
        }, // Configure the global LESS file
        javascriptEnabled: true}}},plugins: [createVuePlugin({ jsx: true})].//createVuePlugin
  resolve: {
    alias: {  // Configure the alias
      The '@': resolve('src'),
      components: resolve('src/components'),
      plugins: resolve('src/plugins'),
      utils: resolve('src/utils'),
      assets: resolve('src/assets'),
      constant: resolve('src/components/bi/constant')}}})Copy the code

Tread pit record:

New Vite projects will have @vitejs/plugin-vue plugin introduced, but Vite2 Webpack does not need to migrate vite

  1. Vite does not support require and require.context so change it
 // require('.. /.. /.. / assets/img/XXXX - XXX. PNG ') instead
    new URL('.. /.. /.. /assets/img/xxx-xxx.png'.import.meta.url)
Copy the code
// const context = require.context('./', false, /\.vue$/
   const context = import.meta.globEager("./**/*.vue")
Copy the code
  1. If you used the history route and added publicPath to vue. Config. js, add base to router
const router = new VueRouter({
  mode: 'history'.base: '/ your publicPath',
  routes
})
Copy the code
  1. The public variable files of less and sass and should be imported to viet.config. js, otherwise undefined will be reported
css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${resolve('src/assets/style/xxx.less')}"; `
        },// Multiple files can be separated by semicolons
        javascriptEnabled: true}}},Copy the code
  1. Import URL (‘ XXX ‘) should be changed to import ”
 // import url('.. / assets/xx/XXX ') instead
    import '.. /assets/xx/xxx'
Copy the code
  1. Eslint and TS cannot read alias configurations in Vite

  "eslint-import-resolver-alias": "^ 1.1.2." ".// Add dependencies
Copy the code

Add configuration in.eslintrc

module.exports = {
   ...
  settings: {
    'import/resolver': {
      alias: [[The '@'.'./src']]}},... }Copy the code

Add configuration in tsconfig.json

{..."paths": {
      "@ / *": [
        "src/*"]},... }Copy the code

Ok ~ perfect solution

  1. There is another problem to note, if the students need to upgrade VUe3, VUe3 can not be usedvue-template-compilerWith another dependency@vue/compiler-sfcTo install vue-loader, specify a version later than 16. The latest version installed by default does not work

Done ~