Vue基于環(huán)境變量統(tǒng)一的多級(jí)路徑部署終極指南
更新時(shí)間：2025年08月14日 09:50:18 作者：前端大魚
這篇文章主要為大家詳細(xì)介紹了一個(gè)完整的解決方案,從環(huán)境變量配置到Nginx部署,確保你的Vue項(xiàng)目可以靈活部署在任何路徑下,下面小編就為大家簡單介紹一下吧
一、環(huán)境變量統(tǒng)一配置
1. 環(huán)境變量配置文件
我們首先在項(xiàng)目根目錄創(chuàng)建以下環(huán)境文件：
# .env.development VUE_APP_BASE_URL=/ VUE_APP_PUBLIC_PATH=/ VUE_APP_API_BASE_URL=/api/
# .env.production VUE_APP_BASE_URL=/department/project/ VUE_APP_PUBLIC_PATH=/department/project/ VUE_APP_API_BASE_URL=/department/project/api/
關(guān)鍵點(diǎn)說明：
VUE_APP_BASE_URL: 路由基礎(chǔ)路徑VUE_APP_PUBLIC_PATH: 靜態(tài)資源基礎(chǔ)路徑VUE_APP_API_BASE_URL: API請(qǐng)求基礎(chǔ)路徑
二、Vue項(xiàng)目核心配置
vue.config.js 完整配置
const path = require('path')
module.exports = {
// 靜態(tài)資源路徑
publicPath: process.env.VUE_APP_PUBLIC_PATH || '/',
// 輸出目錄
outputDir: 'dist',
// 靜態(tài)資源目錄
assetsDir: 'static',
// 文件名哈希
filenameHashing: true,
// webpack配置
chainWebpack: config => {
// 設(shè)置publicPath
config.output
.publicPath(process.env.VUE_APP_PUBLIC_PATH || '/')
// 圖片處理
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => {
options.limit = 8192
options.fallback = {
loader: 'file-loader',
options: {
name: 'static/img/[name].[hash:8].[ext]',
publicPath: process.env.VUE_APP_PUBLIC_PATH || '/'
}
}
return options
})
},
// 開發(fā)服務(wù)器配置
devServer: {
// 支持history模式
historyApiFallback: {
disableDotRule: true,
rewrites: [
{
from: new RegExp('^.*'),
to: path.posix.join(process.env.VUE_APP_PUBLIC_PATH || '/', 'index.html')
}
]
},
// 代理配置
proxy: {
[process.env.VUE_APP_API_BASE_URL]: {
target: 'http://your-api-server.com',
changeOrigin: true,
pathRewrite: {
[`^${process.env.VUE_APP_API_BASE_URL}`]: ''
}
}
}
},
// 生產(chǎn)環(huán)境關(guān)閉sourcemap
productionSourceMap: false
}
三、路由配置最佳實(shí)踐
路由配置文件 (src/router/index.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 獲取基礎(chǔ)路徑，確保不以斜杠結(jié)尾
const BASE_PATH = (process.env.VUE_APP_BASE_URL || '/').replace(/\/$/, '')
const routes = [
{
// 根路徑重定向
path: '',
redirect: 'home'
},
{
// 注意：不要以斜杠開頭
path: 'home',
component: () => import('@/views/Home.vue'),
name: 'home',
meta: { title: '首頁' }
},
{
path: 'about',
component: () => import('@/views/About.vue'),
name: 'about',
meta: { title: '關(guān)于我們' }
},
{
path: '*',
component: () => import('@/views/NotFound.vue'),
name: 'not-found',
meta: { title: '頁面不存在' }
}
]
const router = new VueRouter({
mode: 'history',
base: BASE_PATH,
routes,
// 滾動(dòng)行為
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})
router.beforeEach((to, from, next) => {
document.title = to.meta.title || '默認(rèn)標(biāo)題'
next()
})
export default router
四、資源加載與API請(qǐng)求規(guī)范
1. 資源加載工具類 (src/utils/resource.js)
/**
* 獲取靜態(tài)資源完整URL
* @param {string} relativePath 相對(duì)路徑
* @returns {string} 完整URL
*/
export const getAssetUrl = (relativePath) => {
const baseUrl = process.env.VUE_APP_PUBLIC_PATH || '/'
return `${baseUrl.replace(/\/$/, '')}/${relativePath.replace(/^\//, '')}`
}
/**
* 獲取API完整URL
* @param {string} endpoint API端點(diǎn)
* @returns {string} 完整API URL
*/
export const getApiUrl = (endpoint) => {
const baseUrl = process.env.VUE_APP_API_BASE_URL || '/api/'
return `${baseUrl.replace(/\/$/, '')}/${endpoint.replace(/^\//, '')}`
}
2. Axios實(shí)例配置 (src/utils/request.js)
import axios from 'axios'
import { getApiUrl } from './resource'
// 創(chuàng)建axios實(shí)例
const service = axios.create({
baseURL: process.env.VUE_APP_API_BASE_URL,
timeout: 10000
})
// 請(qǐng)求攔截器
service.interceptors.request.use(
config => {
// 可以在這里添加token等
// config.headers['Authorization'] = getToken()
return config
},
error => {
return Promise.reject(error)
}
)
// 響應(yīng)攔截器
service.interceptors.response.use(
response => {
return response.data
},
error => {
return Promise.reject(error)
}
)
export default service
五、Nginx服務(wù)器配置
1. 基礎(chǔ)Nginx配置
server {
listen 80;
server_name example.com;
# 靜態(tài)資源緩存設(shè)置
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, no-transform";
}
# 項(xiàng)目部署路徑 - 使用環(huán)境變量中的路徑
location /department/project/ {
alias /var/www/html/department/project/dist/;
try_files $uri $uri/ /department/project/index.html;
# 開啟gzip壓縮
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml;
# 安全頭設(shè)置
add_header X-Frame-Options "SAMEORIGIN";
add_header X-Content-Type-Options "nosniff";
add_header X-XSS-Protection "1; mode=block";
}
# API代理
location /department/project/api/ {
proxy_pass http://api-server/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
2. HTTPS增強(qiáng)配置
server {
listen 443 ssl http2;
server_name example.com;
ssl_certificate /etc/ssl/certs/example.com.crt;
ssl_certificate_key /etc/ssl/private/example.com.key;
# SSL優(yōu)化配置
ssl_session_timeout 1d;
ssl_session_cache shared:MozSSL:10m;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384';
ssl_prefer_server_ciphers on;
location /department/project/ {
alias /var/www/html/department/project/dist/;
try_files $uri $uri/ /department/project/index.html;
# 安全頭
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";
add_header Content-Security-Policy "default-src 'self'";
}
}
六、完整部署流程
1. 構(gòu)建與部署腳本
#!/bin/bash
# 設(shè)置環(huán)境
ENV="production"
DEPLOY_PATH="/var/www/html/department/project"
# 安裝依賴
npm install
# 構(gòu)建項(xiàng)目
npm run build:${ENV}
# 同步文件到服務(wù)器
rsync -avz --delete dist/ user@server:${DEPLOY_PATH}/dist/
# 重啟Nginx
ssh user@server "sudo systemctl restart nginx"
echo "Deployment completed!"
2. 多環(huán)境構(gòu)建腳本 (package.json)
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:dev": "vue-cli-service build --mode development",
"build:test": "vue-cli-service build --mode test",
"build:production": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
}
}
七、常見問題解決方案
1. 頁面刷新404問題
解決方案：
- 確保Nginx配置中包含正確的try_files指令
- 檢查Vue路由的base配置是否與環(huán)境變量一致
- 驗(yàn)證publicPath配置是否正確
2. 靜態(tài)資源加載失敗
排查步驟：
- 檢查瀏覽器開發(fā)者工具中的網(wǎng)絡(luò)請(qǐng)求
- 確認(rèn)請(qǐng)求路徑是否包含正確的基礎(chǔ)路徑
- 驗(yàn)證Nginx的alias路徑是否正確
- 檢查文件權(quán)限：
chmod -R 755 /var/www/html
3. API請(qǐng)求路徑錯(cuò)誤
最佳實(shí)踐：
- 使用axios實(shí)例配置baseURL
- 確保API路徑與VUE_APP_API_BASE_URL一致
- 開發(fā)環(huán)境使用代理，生產(chǎn)環(huán)境使用絕對(duì)路徑
八、性能優(yōu)化建議
1.資源壓縮：
- 開啟Nginx gzip壓縮
- 使用Brotli壓縮（需要Nginx支持）
- 壓縮圖片資源
2.緩存策略：
location ~* \.(js|css)$ {
expires 365d;
add_header Cache-Control "public";
}
location ~* \.(jpg|jpeg|png|gif|ico)$ {
expires 30d;
add_header Cache-Control "public";
}
3.代碼分割：
// 使用動(dòng)態(tài)導(dǎo)入實(shí)現(xiàn)路由懶加載
component: () => import('@/views/Home.vue')
總結(jié)
這種方案在多個(gè)大型項(xiàng)目中得到驗(yàn)證，能夠滿足企業(yè)級(jí)應(yīng)用的部署需求。
到此這篇關(guān)于Vue基于環(huán)境變量統(tǒng)一的多級(jí)路徑部署終極指南的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目部署內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 實(shí)現(xiàn) tomato timer(蕃茄鐘)實(shí)例講解
下面小編就為大家?guī)硪黄獀ue 實(shí)現(xiàn) tomato timer(蕃茄鐘)實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
單文件就是把一個(gè)頁面拆分為多個(gè),多層次的組件,通過多層引用,大大縮小vue文件的長度和頁面復(fù)雜度,下面這篇文章主要給大家介紹了關(guān)于vue3單文件組件中style特性的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue.use源碼學(xué)習(xí)小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
element-plus 按鈕展開/隱藏功能實(shí)現(xiàn)
本文給大家介紹element-plus 按鈕展開/隱藏功能實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-06-06
Vue.js 如何添加全局常量或變量? 這是最近一個(gè)同事問的問題，發(fā)現(xiàn)很多朋友對(duì)這塊不熟悉，所以下面這篇文章主要給大家介紹了關(guān)于Vue中定義全局變量與常量的各種方式，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
vue2.0/3.0的響應(yīng)式原理及區(qū)別淺析
這篇文章主要給大家介紹了關(guān)于vue2.0/3.0響應(yīng)式原理及區(qū)別的相關(guān)資料，文中通過圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue-cli創(chuàng)建項(xiàng)目ERROR?in?Conflict:?Multiple?assets?emit?dif
最近vue/cli創(chuàng)建項(xiàng)目后出現(xiàn)了錯(cuò)誤,下面這篇文章主要給大家介紹了關(guān)于vue-cli創(chuàng)建項(xiàng)目ERROR?in?Conflict:?Multiple?assets?emit?different?content?to?the?same?filename?index.html問題的解決辦法,需要的朋友可以參考下2023-02-02
vue3中配置文件vue.config.js不生效的解決辦法
這篇文章主要介紹了vue3中配置文件vue.config.js不生效的解決辦法,文中通過代碼示例講解的非常詳細(xì),對(duì)大家解決問題有一定的幫助,需要的朋友可以參考下2024-05-05
解決VUE項(xiàng)目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問題
這篇文章主要介紹了解決VUE項(xiàng)目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問題2020-08-08
下面小編就為大家分享一篇完美解決axios在ie下的兼容性問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03