vue3+js?Vite多環(huán)境端口配置以及@別名設(shè)置的一次嘗試過程
一、相對路徑別名設(shè)置
看見有兩種寫法的，試了一下都可以，但用__dirname的似乎比較多
1. 方法一：使用 resolve(__dirname, “./src”)
編輯vite.config.js文件：
import { resolve } from "path";
resolve: {
alias: {
// 起個別名，在引用資源時，可以用‘@/資源路徑'直接訪問
"@": resolve(__dirname, "./src")
}
},
如果提示 找不到 path 或其相對應(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: {
// 起個別名，在引用資源時，可以用‘@/資源路徑'直接訪問
'@': 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() 解析相對路徑，再通過 fileURLToPath 將 URL 轉(zhuǎn)換為文件系統(tǒng)路徑。
要求: 必須在 ESM 文件中使用（即 package.json 中需設(shè)置 “type”: “module”，或文件后綴為 .mjs）。
3.2 resolve(__dirname, “./src”)
__dirname ：返回當(dāng)前文件所在目錄的絕對路徑（如 /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) | 相對于當(dāng)前文件 URL | 相對于當(dāng)前文件目錄 |
4. 可選配置 jsconfig.json
作用是讓編輯器（如 VS Code）識別路徑別名，提供代碼提示、跳轉(zhuǎn)等智能支持。
若不配置 jsconfig.json，Vite 項目仍可運行，但編輯器可能無法識別別名，顯示路徑錯誤提示（實際不影響構(gòu)建結(jié)果）。
在項目根目錄創(chuàng)建/修改 jsconfig.json，告知編輯器路徑別名的映射關(guān)系：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
二、多環(huán)境端口配置
vite:官方文檔對環(huán)境配置的描述： https://vitejs.cn/vite3-cn/guide/env-and-mode.html#env-variables
1. 關(guān)于.env 文件
.env # 所有情況下都會加載
.env.local # 所有情況下都會加載，但會被git 忽略
.env.[mode] # 只在指定模式下加載
.env.[mode].local #只在指定模式下加載，但會被 git 忽略
環(huán)境加載優(yōu)先級：.env.[mode] > .env
2. 創(chuàng)建.env文件
在根目錄下創(chuàng)建以下文件(和vite.config.js保持同級目錄)：
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 運行 npm run dev 時自動打開瀏覽器 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文件 (測試環(huán)境)
# 測試環(huán)境 NODE_ENV = "test" # 測試環(huán)境接口地址 VITE_API_URL = "http://localhost:8083"
3. 修改 package.json 文件
默認(rèn)情況下，開發(fā)服務(wù)器 (dev 命令) 運行在 development (開發(fā)) 模式，而 build 命令則運行在 production (生產(chǎn)) 模式。
你可以通過傳遞 --mode 選項標(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 會返回undefined。
因為import.meta.env 是在 Vite 服務(wù)運行時注入到代碼中的瀏覽器環(huán)境的環(huán)境變量，而vite.config.js編譯的時間在Vite 服務(wù)運行之前
此時就要使用到 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] 等）
// 第三個參數(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, // 指定端口號
open: true // 啟動后自動打開瀏覽器
},
};
});
由于輸出的全是字符串變量和規(guī)定的環(huán)境變量類型不太符合，會出問題：
// 直接使用的情況
server: {
host: '0.0.0.0', // url地址,監(jiān)聽所有網(wǎng)絡(luò)接口
port: env.VITE_PORT, // 指定端口號
open: env.VITE_OPEN // 啟動后自動打開瀏覽器
},
所以要新建一個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"; //因為在Node.js執(zhí)行配置文件時，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: {
// 起個別名，在引用資源時，可以用‘@/資源路徑'直接訪問
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
server: {
host: '0.0.0.0', // url地址,監(jiān)聽所有網(wǎng)絡(luò)接口
port: viteEnv.VITE_PORT, // 指定端口號
open: viteEnv.VITE_OPEN // 啟動后自動打開瀏覽器
},
}
})
總結(jié)
到此這篇關(guān)于vue3+js Vite多環(huán)境端口配置以及@別名設(shè)置的一次嘗試過程的文章就介紹到這了,更多相關(guān)vue3+js Vite多環(huán)境端口配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了?面試問題Vue雙向數(shù)據(jù)綁定原理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
vue實現(xiàn)的封裝全局filter并統(tǒng)一管理操作示例
這篇文章主要介紹了vue實現(xiàn)的封裝全局filter并統(tǒng)一管理操作,結(jié)合實例形式詳細(xì)分析了vue封裝全局filter及相關(guān)使用技巧,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Vue動畫之第三方類庫實現(xiàn)動畫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
淺談實現(xiàn)vue2.0響應(yīng)式的基本思路
這篇文章主要介紹了淺談實現(xiàn)vue2.0響應(yīng)式的基本思路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
如何利用 vue實現(xiàn)鼠標(biāo)懸停時顯示元素或文本
Vue.js 是一種流行的 JavaScript 框架，可以使 Web 應(yīng)用程序的開發(fā)變得更加輕松和高效，這篇文章主要介紹了在 vue 中鼠標(biāo)懸停時顯示元素或文本,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue移動端項目中如何實現(xiàn)頁面緩存的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了在vue3中安裝使用bootstrap過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
五分鐘教你使用vue-cli3創(chuàng)建項目(新手入門)
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項目，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關(guān)于vue中點擊下載圖片的實現(xiàn)方法,在Vue的模板中,我們可以將下載屬性綁定至或元素上,用來實現(xiàn)點擊下載,需要的朋友可以參考下2023-08-08
vue項目使用js監(jiān)聽瀏覽器關(guān)閉、刷新及后退事件的方法
這篇文章主要給大家介紹了關(guān)于vue項目使用js監(jiān)聽瀏覽器關(guān)閉、刷新及后退事件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09