1. Vite創(chuàng)建Vue項(xiàng)目

Vite 需要 Node.js 版本 >= 12.0.0。

使用yarn
yarn create vite
使用npm
npm init vite@latest
指定項(xiàng)目名稱和模板快速搭建
# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要額外的雙橫線：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

2. 常用配置

// 通過引入defineConfig來加入代碼提示
import { defineConfig } from 'vite'
// 通過引入vue插件來完成對vue的支持,須在plugins中注冊
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
export default defineConfig({
  //1.別名配置
  resolve: {
    alias: [
      { find: '@', replacement: resolve(__dirname, 'src') },
      { find: 'comps', replacement: resolve(__dirname, 'src/components') },
    ],
  },
  //2.插件相關(guān)配置
  plugins: [vue()],
  //3.服務(wù)有關(guān)配置
  server: {
    open: true,
    /* 設(shè)置為0.0.0.0則所有的地址均能訪問 */
    host: '0.0.0.0',
    port: 3000,
    https: false,
    proxy: {
      '/api': {
        /* 目標(biāo)代理服務(wù)器地址 */
        target: 'http://xxx:9000/',
        /* 允許跨域 */
        changeOrigin: true,
      },
    },
  }
})