Vue3. 0 project transformed from webpack to vite

Time:2022-5-14

What is vite

Vite (French for “fast”, pronounced / vit /) is a new front-end construction tool that can significantly improve the front-end development experience.

It mainly consists of two parts:

Official website

Why choose vite

  • Vite2 speed service, which directly uses ESM files. Each update is fast, as long as your browser supports it
  • Webpack has the advantage of strong ecology, which vite needs to continue to work on
  • In addition to the large gap between the service startup and update speed of the development environment, there is no gap in the production package

realization

1. Uninstall webpack related dependencies and delete Vue config. JS configuration file
2. Installation dependency

npm i vite --save -dev
npm i vite-plugin-html --save -dev
A vite plug-in for processing HTML, similar to webpack HTML plugin
npm i vite-plugin -compression
For code compression
npm i vite-plugin-imagemin --save -dev
For picture compression
npm i vue-loader-v16 --save -dev
Similar to Vue loader

3. Modify index html

<script src=".src.main.js" type="module"></script>
Pay attention to index HTML needs to be placed in the root directory (see vite official website)

4. Modify vite config. JS configuration file

import { defineConfig } from 'vite';
const { resolve } = require('path');
import vue from '@vitejs/plugin-vue';
import webpackConfig from './src/config/package.ts';

export default defineConfig({
  base: webpackConfig.PUBLIC_PATH,
  publicDir: resolve(__dirname, 'public'),
  assetsInclude: resolve(__dirname, 'src/assets'),
  resolve: {
    //Alias
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    port: webpackConfig.PORT,
    proxy: {
      '/api': {
        target: webpackConfig.PROXY_URL,
        // true: cross domain, // change
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    sourcemap: !webpackConfig.IS_PRODUCTION,
  },
  plugins: [vue()],
});

5. Package modification JSON packaging command

"scripts": {
    "serve": "cross-env NODE_ENV=development vite",
    "build": "cross-env NODE_ENV=production vite build",
    "lint": "vite lint"
  },

So we’re done

npm i
npm run serve
Vite needs [node. JS]( https://nodejs.org/en/ )Version > = 12.0.0.

1. Modify the proxy address without restarting

HMR is done

2. Picture address using alias 404

Replace require (@ / assets / img) with / SRC / assets/

In fact, vite doesn't need to deal with this code in the development phase! During the production build, vite will carry out the necessary conversion to ensure that the URL still points to the correct address after packaging and resource hashing.

function getImageUrl(name) {return new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url).href;}

The imported picture does not support require

3. The startup project does not support IP: port access

Modify vite config. JS configuration

server:{

host: '0.0.0.0'

}

Then modify the package json

"dev": "vite --host 0.0.0.0"

4.require.context()

Use the import provided by vite Glob for replacement

5. Mode and environmental variables

https://zhuanlan.zhihu.com/p/378228376

import { loadEnv } from 'vite'

export default ({ mode }) => {

return defineConfig({

plugins: [vue()],

base:loadEnv(mode, process.cwd()).VITE_APP_NAME

})

}

.**env. The staging file declares variables. Note**

**VITE_NODE_ENV = development**

**VITE_BASE_URL = /api**

**VITE_PUBLIC_PATH = /**

**No quotation marks, semicolons and other characters are allowed**

6.less

npm i less -D

There is also a specific pit written in it. You can step on it yourself!