Using vite to build Vue project

We knew last year that Youda had developed a new web Develop build tools Vite, the other day Vite2.0 It's officially released ！ It's time to learn ！

Build the first Vite project :

Node.js need >12.0.0

npm init @vitejs/app

After installation, you can specify the project name ：

Select the initialization template ：

When the selection is complete ：

cd vite-project
npm install
npm run dev

first Vite+Vue3.0 The project is set up ！Vite The default application template is 3.x, If the project starts , In the browser. F12 I can't see Vue Options ,Vue.js not detected, Need to update devtools, Update address

Quick build method ：

# npm 6.x
npm init @vitejs/app my-project --template vue
# npm 7+ Need extra double horizontal lines ：
npm init @vitejs/app my-project -- --template vue

pack ：

npm run build

After packing, open the project blank , Need configuration vite.config.js Medium base The basic path is './'

environment variable ：

Vite In a special import.meta.env Expose environment variables on objects

import.meta.env.MODE: String The environment mode of application running
import.meta.env.BASE_URL: String Applications are being deployed on base URL, from base Configuration items determine
import.meta.env.PROD: Boolean Whether the application is running in the production environment
import.meta.env.DEV: Boolean Whether the application is running in the development environment

.env file

.env # It will load in all cases
.env.local # It will load in all cases , But it will be git Ignore （ Need to be in .gitignore Medium plus .local）
.env.[mode] # Load only in the specified mode
.env.[mode].local # Load only in the specified mode , Will be git Ignore

vite.config.js Common configuration

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
// Array of plug-ins to use
plugins: [vue()],
// A common infrastructure path for developing or producing environmental services , It can be /foo/、https://foo.com/、 Empty string or ./( For development environment ) Several types , This option can also be specified through command line arguments （ example ：vite build --base=/my/public/path/）
base: './',
// Folder for static resource services , Default "public"
publicDir: 'public',
css: {
postcss: {
plugins: [
require('autoprefixer')
]
}
},
server: {
// Server hostname , If external access is allowed , Can be set to "0.0.0.0"
host: '0.0.0.0',
// Server port number
port: 3000,
// boolean | string Automatically open the application in the browser when you start the project ; If string, such as "/index.html", Will open http://localhost:3000/index.html
open: false,
// Custom proxy rules
proxy: {
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
build: {
// Specify the output path , Default 'dist'
outDir: 'dist',
// Specify the storage path of the generated static resources ( be relative to build.outDir)
assetsDir: 'assets',
// An import or reference resource less than this threshold will be inlined as base64 code , Set to 0 This can be disabled . Default 4096（4kb）
assetsInlineLimit: '4096',
// Enable / Ban CSS Code splitting , If you disable , All of the whole project CSS Will be extracted into a CSS In file , Default true
cssCodeSplit: true,
// Whether to generate after construction source map file , Default false
sourcemap: false,
// by true when , Will generate manifest.json file , For back end Integration
manifest: false
}
})