This article records the pits when configuring VitE2, make a note, if there is any infringement, please inform us

Vite Chinese documentation cn.vitejs.dev/guide/

If you are good at English, you can also refer to the English document vitejs.dev/config/

Vite also supports the VUE3 script-setup script

Please refer to github.com/vuejs/rfcs/…

Very convenient, O(∩_∩)O ha ha ~

1. Initial construction of the project

NPM init. vitejs/app file name --template vue

You can also use NPM init@vitejs /app file name and then be prompted to select vue or VUE-ts etc. Choose your own template

The.env file is the same as before, in the.vue file we just changed from process.env to import.meta.env

2. Install routes

npm install vue-router@4 --save

Create a router file and use the vue instance in the main.js file

The VueRouter configuration has changed, and the previous * rule requires a re

import { createRouter, createWebHistory,createWebhashHistory } from "vue-router"; Const routes = [/ / routing rules {path: / : pathMatch "(. *)", the name: "Home", component: () = > import (".. / layout/default. Vue "),}]. Const router = createRouter({history: createWebHistory(),// switch routes based on business}); export default router;Copy the code

CreateWebHistory indicates the history mode, and createWebhashHistory indicates the hash mode

3. Install vuex

npm i vuex@next --save

As with the routing file method, use is used in the vue instance as before

import { createStore } from "vuex";
export default createStore({
  state: {

  },
  mutations: {

  },
  actions: {
 
  },
  modules: {}
});
Copy the code

4. Install axios

As usual, I’m going to omit this one

5. Install vant3

npm i vant@next -S

The vant needs to import global styles in main.js, which can be imported on demand using either viet-plugin-style-import or viet-plugin-IMP.

npm i vite-plugin-imp -D 
Copy the code

vite.config.js

import vitePluginImp from 'vite-plugin-imp'; // Use plugins in plugins: [vitePluginImp({// import libList on demand: [{libName: 'vant', style(name) { return `vant/es/${name}/index.css`; }] }), ],Copy the code

6. Installation of sass

Since Vite was built without Sass, unlike the WebPack version, there is no need to install sass-Loader, just one command is enough

npm i sass -save

7. Suitable Rem layout on mobile terminal

npm install postcss-pxtorem -D

Create postcss.config.js in the root directory

Free configuration based on requirements

Module. exports = {"plugins": {"postcss-pxtorem": {rootValue: 37.5, // Vant root size is 37.5 propList: ['*'],}}}Copy the code

Rem reference values can be set by hand or using the amFE-Flexible plugin

npm i -S amfe-flexible

Once installed, introduce amfe-flexible in main.js

8. Vite plug-in

Viet-plugin – Legacy Compatibility processing plug-in

Method of use

vite.config.js

import legacyPlugin from 'vite-plugin-legacy'; // Use plugins in plugins: [legacyPlugin({targets: ['> 0.5%', 'last 2 versions', 'Firefox ESR', 'not dead'], // Define which polyfills your legacy bundle needs. They will be loaded // from the Polyfill.io server. See the "Polyfills" section for more info. polyfills: [// Empty by default], // toggle whether the browserslist configuration source is used.  // https://babeljs.io/docs/en/babel-preset-env#ignorebrowserslistconfig ignoreBrowserslistConfig: false, // When true, core-js@3 modules are inlined based on usage. // When false, global namespace APIs (eg: Object.entries) are loaded // from the Polyfill.io server. corejs: false }) ],Copy the code

9. Vite configuration items

The vite2 alias configuration has been modified

const path = require('path'); const Resolve = name => path.resolve(__dirname, name); export default defineConfig({ resolve: { alias: {find:'@',replacement:Resolve('./ SRC ')}, {the find: '@ utils, replacement: Resolve ('. / SRC/utils')}]}})Copy the code

Pay attention to

  • 1. Vue files cannot use require
  • 2. Obtain environment variables at runtime using import.meta.env