上一節(jié) - 搭建vue3+typescript+vite+yarn項目
前言：
在vue2里，我們使用webpack打包工具振愿，一些基本配置我們都是熟悉不能再熟悉毅糟，但在vite里红选，有什么不同呢？
一姆另、配置文件
vue2里喇肋，針對webpack的配置，是基于vue.config.js文件
但在基于vite的vue3里迹辐，配置文件是vite.config.js
我構(gòu)建的是ts版本的vue3項目蝶防，那么我的配置文件就是vite.config.ts
而且該文件項目創(chuàng)建的時候已經(jīng)默認(rèn)生成了
新創(chuàng)建的項目配置文件，僅僅配置vue的支持明吩，如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
vue是以插件形式配置到vite里的
defineConfig接受一個對象间学，它的每個屬性對應(yīng)文檔里的配置項
二、配置反向代理
配置反向代理印荔，利用server配置項
server: {
watch: {
usePolling: true
},
port: 3002,
host: '0.0.0.0',
hmr: {overlay: false},
strictPort: false, // 設(shè)為 true 時若端口已被占用則會直接退出低葫，而不是嘗試下一個可用端口。
proxy: {
// 字符串簡寫寫法
// [key]: `${import.meta.env.VITE_APP_BASE_SERVER}`,
// 選項寫法
// '/api': {
// target: 'http://jsonplaceholder.typicode.com',
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, '')
// },
[config.VITE_API_BASE_URL]: {
target: config.VITE_APP_BASE_SERVER,
changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, '')
},
// 正則表達(dá)式寫法
// '^/fallback/.*': {
// target: 'http://jsonplaceholder.typicode.com',
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/fallback/, '')
// },
// 使用 proxy 實例
// '/api': {
// target: 'http://jsonplaceholder.typicode.com',
// changeOrigin: true,
// configure: (proxy, options) => {
// // proxy 是 'http-proxy' 的實例
// // console.log(proxy, options)
// }
// }
}
},
配置項一目了然躏鱼，跟vue2的vue.config.js的配置大同小異
這里主要說明下氮采，我proxy里的config
[config.VITE_API_BASE_URL]: {
target: config.VITE_APP_BASE_SERVER,
changeOrigin: true,
},
config變量來源于全局變量
// loadEnv函數(shù)可以讀取文件里的環(huán)境變量
import { defineConfig, loadEnv } from 'vite'
const config = loadEnv('development', './')
console.log('查看環(huán)境變量', config)
image.png
這需要在根目錄下創(chuàng)建兩個命名為：.env.development、.env.production的文件
編寫相關(guān)的變量：
NODE_ENV = 'development'
# .env.development
# base api
VITE_API_BASE_URL = '/jeecg-boot'
VITE_APP_BASE_SERVER = 'http://192.....:8080'
三染苛、配置路徑別名
vue2中使用習(xí)慣了開箱即用的路徑別名鹊漠，但在vue3的ts項目里主到，如果直接使用，是會報錯的：
import FullScreen from '@/components/Fullscreen/index.vue'
image.png
- 首先下載@types/node依賴
// npm
npm install @types/node --save-dev
// yarn
yarn add @types/node --save-dev
- 到vite.config.ts文件增加resolve.alias配置
...
const path = require('path');
export default ({mode}) => defineConfig({
...
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
}
}
})
這樣配置后躯概，引入組件就能正常被編譯了
注意：vite配置文件改變配置后登钥，不需要重新啟動項目，就可以生效
