vue3+js?Vite多環(huán)境端口配置以及@別名設(shè)置的一次嘗試過程
一、相對(duì)路徑別名設(shè)置
看見有兩種寫法的，試了一下都可以，但用__dirname的似乎比較多
1. 方法一：使用 resolve(__dirname, “./src”)
編輯vite.config.js文件：
import { resolve } from "path";
resolve: {
alias: {
// 起個(gè)別名，在引用資源時(shí)，可以用‘@/資源路徑'直接訪問
"@": resolve(__dirname, "./src")
}
},
如果提示 找不到 path 或其相對(duì)應(yīng)的類型聲明：
npm install @types/node --save-dev
2. 方法二：使用 fileURLToPath(new URL(‘./src’, import.meta.url))
編輯vite.config.js文件：
import { fileURLToPath, URL } from 'node:url'
resolve: {
alias: {
// 起個(gè)別名，在引用資源時(shí)，可以用‘@/資源路徑'直接訪問
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
編輯package.json文件：
"type": "module"
3. 區(qū)別
3.1 new URL(‘./src’, import.meta.url)
import.meta.url ：返回當(dāng)前模塊的完整 file:// URL（如 file:///project/src/index.js）
需配合 new URL() 解析相對(duì)路徑，再通過 fileURLToPath 將 URL 轉(zhuǎn)換為文件系統(tǒng)路徑。
要求: 必須在 ESM 文件中使用（即 package.json 中需設(shè)置 “type”: “module”，或文件后綴為 .mjs）。
3.2 resolve(__dirname, “./src”)
__dirname ：返回當(dāng)前文件所在目錄的絕對(duì)路徑（如 /project/src）。
通過 resolve(__dirname, "./src") 拼接路徑。
要求: 只能在 CommonJS 文件中使用（默認(rèn)的 .js 或 .cjs 文件）。
3.3 總結(jié)
| fileURLToPath(new URL(‘./src’, import.meta.url)) | resolve(__dirname, “./src”) | |
|---|---|---|
| 模塊系統(tǒng) | ESM | CommonJS |
| 路徑基準(zhǔn) | 相對(duì)于當(dāng)前文件 URL | 相對(duì)于當(dāng)前文件目錄 |
4. 可選配置 jsconfig.json
作用是讓編輯器（如 VS Code）識(shí)別路徑別名，提供代碼提示、跳轉(zhuǎn)等智能支持。
若不配置 jsconfig.json，Vite 項(xiàng)目仍可運(yùn)行，但編輯器可能無法識(shí)別別名，顯示路徑錯(cuò)誤提示（實(shí)際不影響構(gòu)建結(jié)果）。
在項(xiàng)目根目錄創(chuàng)建/修改 jsconfig.json，告知編輯器路徑別名的映射關(guān)系：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
二、多環(huán)境端口配置
vite:官方文檔對(duì)環(huán)境配置的描述： https://vitejs.cn/vite3-cn/guide/env-and-mode.html#env-variables
1. 關(guān)于.env 文件
.env # 所有情況下都會(huì)加載
.env.local # 所有情況下都會(huì)加載，但會(huì)被git 忽略
.env.[mode] # 只在指定模式下加載
.env.[mode].local #只在指定模式下加載，但會(huì)被 git 忽略
環(huán)境加載優(yōu)先級(jí)：.env.[mode] > .env
2. 創(chuàng)建.env文件
在根目錄下創(chuàng)建以下文件(和vite.config.js保持同級(jí)目錄)：
PS: 寫環(huán)境變量和其它變量，必須要以VITE_開頭，例如 :
若環(huán)境變量和其它變量不想以VITE_開頭 ，則可以在 vite.config.js 文件中添加
envPrefix: "自定義開頭"
2.1 .env文件 (全局環(huán)境)
# title VITE_GLOB_APP_TITLE = 'vue-demo' # port VITE_PORT = 3301 # open 運(yùn)行 npm run dev 時(shí)自動(dòng)打開瀏覽器 VITE_OPEN = true # 是否生成包分析文件 VITE_REPORT = false # 是否開啟gzip壓縮 VITE_BUILD_GZIP = false # 是否刪除生產(chǎn)環(huán)境 console VITE_DROP_CONSOLE = true
2.2 .env.development文件 (本地環(huán)境)
# 本地環(huán)境 NODE_ENV = 'development' # 本地環(huán)境接口地址 VITE_API_URL = 'http://localhost:3301'
2.3 .env.production文件 (線上環(huán)境)
# 線上環(huán)境 NODE_ENV = "production" # 線上環(huán)境接口地址 VITE_API_URL = "http://localhost:8082"
2.4 .env.test文件 (測(cè)試環(huán)境)
# 測(cè)試環(huán)境 NODE_ENV = "test" # 測(cè)試環(huán)境接口地址 VITE_API_URL = "http://localhost:8083"
3. 修改 package.json 文件
默認(rèn)情況下，開發(fā)服務(wù)器 (dev 命令) 運(yùn)行在 development (開發(fā)) 模式，而 build 命令則運(yùn)行在 production (生產(chǎn)) 模式。
你可以通過傳遞 --mode 選項(xiàng)標(biāo)志來覆蓋命令使用的默認(rèn)模式
"dev": "vite --mode development", "test": "vite --mode test", "prod": "vite --mode production", "build:dev": "vite build --mode development", "build:prod": "vite build --mode production", "build:test": "vite build --mode test",
4. 使用ENV配置
一般情況下使用import.meta.env來獲取文件中的配置
例如嘗試輸出：
console.log(import.meta.env) console.log(import.meta.env.VITE_API_URL)
5.修改 vite.config.js 文件
5.1 使用loadEnv()
在 vite.config.js 中 輸出 import.mjeta.env 會(huì)返回undefined。
因?yàn)?code>import.meta.env 是在 Vite 服務(wù)運(yùn)行時(shí)注入到代碼中的瀏覽器環(huán)境的環(huán)境變量，而vite.config.js編譯的時(shí)間在Vite 服務(wù)運(yùn)行之前
此時(shí)就要使用到 loadEnv():Vite 提供了 loadEnv 函數(shù)，用于在 Node.js 中加載 .env 文件的環(huán)境變量
import { defineConfig, loadEnv } from 'vite';
export default defineConfig(({ mode }) => {
// 加載當(dāng)前模式下的環(huán)境變量（包括 .env, .env.[mode] 等）
// 第三個(gè)參數(shù)為空字符串，加載所有變量
// const env = loadEnv(mode, process.cwd(), '');
// 或指定前綴（如 'VITE_'）以僅加載特定變量
// const env = loadEnv(mode, process.cwd(), 'VITE_');
// 默認(rèn)輸出'VITE_'前綴變量
const env = loadEnv(mode, process.cwd());
console.log(env)
return {
server: {
host: '0.0.0.0', // url地址,監(jiān)聽所有網(wǎng)絡(luò)接口
port: 3001, // 指定端口號(hào)
open: true // 啟動(dòng)后自動(dòng)打開瀏覽器
},
};
});
由于輸出的全是字符串變量和規(guī)定的環(huán)境變量類型不太符合，會(huì)出問題：
// 直接使用的情況
server: {
host: '0.0.0.0', // url地址,監(jiān)聽所有網(wǎng)絡(luò)接口
port: env.VITE_PORT, // 指定端口號(hào)
open: env.VITE_OPEN // 啟動(dòng)后自動(dòng)打開瀏覽器
},
所以要新建一個(gè)getEnv.js文件進(jìn)行轉(zhuǎn)換.
5.2 新建getEnv.js文件
export function wrapperEnv(envConf) {
const ret = {};
for (const envName of Object.keys(envConf)) {
let realName = envConf[envName].replace(/\\n/g, "\n");
realName = realName === "true" ? true : realName === "false" ? false : realName;
if (envName === "VITE_PORT") {
realName = Number(realName);
}
if (envName === "VITE_PROXY") {
try {
realName = JSON.parse(realName);
} catch (error) {}
}
ret[envName] = realName;
process.env[envName] = realName;
}
return ret;
}
5.3 最終 vite.config.js文件
import { fileURLToPath, URL } from 'node:url'
import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import {wrapperEnv} from "./src/utils/getEnv.js"; //因?yàn)樵贜ode.js執(zhí)行配置文件時(shí)，Vite的別名配置尚未生效,所以此處無法用別名 @/utils/getEnv.js
// https://vite.dev/config/
export default defineConfig(({ mode}) => {
//console.log(import.meta.env)
const env = loadEnv(mode, process.cwd())
console.log(env)
const viteEnv = wrapperEnv(env);
console.log(viteEnv)
return {
plugins: [
vue(),
],
resolve: {
alias: {
// 起個(gè)別名，在引用資源時(shí)，可以用‘@/資源路徑'直接訪問
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
server: {
host: '0.0.0.0', // url地址,監(jiān)聽所有網(wǎng)絡(luò)接口
port: viteEnv.VITE_PORT, // 指定端口號(hào)
open: viteEnv.VITE_OPEN // 啟動(dòng)后自動(dòng)打開瀏覽器
},
}
})
總結(jié)
到此這篇關(guān)于vue3+js Vite多環(huán)境端口配置以及@別名設(shè)置的一次嘗試過程的文章就介紹到這了,更多相關(guān)vue3+js Vite多環(huán)境端口配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-echarts如何實(shí)現(xiàn)圖表組件封裝詳解
由于在項(xiàng)目中需要對(duì)數(shù)據(jù)進(jìn)行可視化處理,也就是用圖表展示,所以下面這篇文章主要給大家介紹了關(guān)于vue-echarts如何實(shí)現(xiàn)圖表組件封裝的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue下axios攔截器token刷新機(jī)制的實(shí)例代碼
這篇文章主要介紹了vue下axios攔截器token刷新機(jī)制的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Ant Design Vue table中列超長(zhǎng)顯示...并加提示語(yǔ)的實(shí)例
這篇文章主要介紹了Ant Design Vue table中列超長(zhǎng)顯示...并加提示語(yǔ)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
在實(shí)際應(yīng)用場(chǎng)景中,假如有一個(gè)下載或者導(dǎo)出請(qǐng)求,數(shù)據(jù)量非常大的情況下,接口響應(yīng)的會(huì)很慢,這時(shí)候我我們想中斷請(qǐng)求,該怎么做呢？本文給大家介紹了axios請(qǐng)求中斷的幾種方法,需要的朋友可以參考下2024-10-10
vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題
這篇文章主要介紹了vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解vue-cli+element-ui樹形表格(多級(jí)表格折騰小計(jì))
這篇文章主要介紹了vue-cli + element-ui 樹形表格（多級(jí)表格折騰小計(jì)），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
vue項(xiàng)目查看vue版本及cli版本的實(shí)現(xiàn)方式
這篇文章主要介紹了vue項(xiàng)目查看vue版本及cli版本的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了淺談Vue.use的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue多語(yǔ)言轉(zhuǎn)換的幾種方法總結(jié)
這篇文章主要介紹了vue多語(yǔ)言轉(zhuǎn)換的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05