Detailed explanation of vite2.0 configuration learning (typescript version)

introduce

You Yuxi’s original words.

• vite is similar to Vue CLI. vite is also a build tool that provides basic project scaffolding and development server.
• vite is a development server based on browser native ES imports. Skip the concept of packaging, and the server compiles and returns on demand.
• Vite is 10+ times faster than webpack and supports hot updates, but it is still in the testing phase.
• Configuration files also support hot updates! ! !

create

Execute npm init @vitejs/app, I choose vue-ts here

Version

"vite": "^2.0.0-beta.48"

alias

vite.config.ts

const path = require('path')
 alias: {
  "@": path.resolve(__dirname, "src"),
  "@c": path.resolve(__dirname, "src/components")
 },

Environment variable configuration

1. Create in the root directory

2. Only variables prefixed with VITE_ are exposed to the code processed by Vite. The following is the .env.production file, and the others are similar.
shell # Development environment VITE_APP_ENV = 'development' # API address VITE_APP_PATH = 'dev/...'

3. Start the package.json file and add --mode test after the command. This is the same as vue2

"dev:test": "vite --mode test",

4. Usage is somewhat different from vue2. It cannot be read in vite.config.ts, but other files can be obtained

import.meta.env

The output is:

Add vue-router (vue3 uses version 4.0+)

1. Installation

npm i [email protected] --save, install version 4.0

2. index.ts

import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
// @ts-ignore
const test = () => import('../views/test1.vue')
const routes: Array<RouteRecordRaw> = [
  {path: "/", redirect: "/test1"},
  {
    path: "/test1",
    name: 'test1',
    component: test,
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

export default router

3. main.ts

import router from "./router"
createApp(App)
  .use(router)
  .mount('#app')

Add vuex (version 4 or above)

1. Installation

npm i vuex@index -D

2. store/index.ts

import { createStore } from 'vuex'

export default createStore({
 state: {
 },
 //...
})

3. main.ts

import store from './store'

createApp(App)
  .use(store)
  .mount('#app')

scss environment

1. Install npm i sass -D, you can use sass syntax directly
2. vite.config.ts, global import of scss files

css: {
  preprocessorOptions: {
   scss: {
    additionalData: `@import "./src/assets/scss/global.scss";` //your scss file path}
  }
 },

This is the end of this article about detailed explanation of vite2.0 configuration learning (typescript version). For more relevant vite2.0 configuration content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!