VUE前端打包到測試環(huán)境的解決方法
一、打包
1、測試環(huán)境打包命令
npm run build:stage
2、生產(chǎn)環(huán)境打包命令
npm run build:prod
二、前端代碼中修改內(nèi)容
1、Navbar.vue (修復(fù)退出登錄404bug)
this.$store.dispatch('LogOut').then(() => {
// location.href = '/index';
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
})2、src/router/index.js（修復(fù)【點(diǎn)擊/刷新】菜單的時候404bug）
注意：/admin/ 是你們自己nginx中的目錄 正常是/dist/
export default new Router({
mode: 'history', // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
base: "/admin/", // nginx 非根目錄需要加base，不然到時候路由進(jìn)不去
routes: constantRoutes
})3、vue.config.js （例如 https://www.ruoyi.vip/。如果應(yīng)用被部署在一個子路徑上，你就需要用這個選項(xiàng)指定這個子路徑。例如，如果你的應(yīng)用被部署在 https://www.ruoyi.vip/admin/，則設(shè)置 baseUrl 為 /admin/ )
publicPath: process.env.NODE_ENV === ("production" || "test") ? "/admin/" : "/",4、src/utils/request.js (修復(fù)退出登錄404bug)
store.dispatch('LogOut').then(() => {
// location.href = '/index';
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
})5、src/store/modules/permission.js（修復(fù)webpack版本問題）
export const loadView = (view) => {
if (process.env.NODE_ENV === 'development') {
return (resolve) => require([`@/views/${view}`], resolve)
} else {
// 使用 import 實(shí)現(xiàn)生產(chǎn)環(huán)境的路由懶加載
// return () => import(`@/views/${view}`)
return (resolve) => require([`@/views/${view}`], resolve)
}
}三、修復(fù)部署到測試環(huán)境
頁面樣式錯亂
問題描述：本地開發(fā)時組件的樣式使用scoped進(jìn)行局部樣式設(shè)置，但是打包編譯到測試環(huán)境以后發(fā)現(xiàn)，組件里面的樣式會被編譯成2個樣式，一個全局樣式跟局部樣式，從而導(dǎo)致組件的樣式污染到其它同名的樣式
解決方法：找到vue.config.js文件進(jìn)行如下配置修改
css: {
// loaderOptions: {
// sass: {
// sassOptions: { outputStyle: "expanded" }
// }
// }
extract:false,
sourceMap:false
}四、nginx配置
配置測試環(huán)境代理： /stage-api/
配置生產(chǎn)環(huán)境代理： /prod-api/
location /admin {
alias html/admin/;
try_files $uri $uri/ @admin_router;
index index.html index.htm;
}
location @admin_router {
rewrite ^.*$ /admin/index.html last;
}
location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://172.18.12.117:8080/;
}
location /stage-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://172.18.12.117:8080/;
}到此這篇關(guān)于若依VUE前端打包到測試環(huán)境的文章就介紹到這了,更多相關(guān)vue打包到測試環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3組件化開發(fā)常用API知識點(diǎn)總結(jié)
Vue是目前Web前端最流行的開發(fā)框架技術(shù),?下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)常用API的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue+elementUI中表格高亮或字體顏色改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
uniapp前端實(shí)現(xiàn)微信支付功能全過程(小程序、公眾號H5、app)
這篇文章主要介紹了uniapp前端實(shí)現(xiàn)微信支付功能的相關(guān)資料,通過uniapp開發(fā)跨平臺應(yīng)用時,需要處理不同平臺的支付方式,包括微信小程序支付、公眾號H5支付和App支付,需要的朋友可以參考下2024-09-09
在Vue3中,導(dǎo)航守衛(wèi)（Navigation Guards）用于在路由切換前后執(zhí)行一些操作,例如驗(yàn)證用戶權(quán)限、取消路由導(dǎo)航等,本文主要為大家介紹了vue3中導(dǎo)航守衛(wèi)的使用方法,需要的可以參考下2023-08-08
這篇文章主要介紹了如何在Vue.JS中使用圖標(biāo)組件，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-08-08
這篇文章主要介紹了vue數(shù)據(jù)字典取鍵值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3 SFC 和 TSX 方式自定義組件實(shí)現(xiàn) v-model的詳細(xì)
v-model 是 vue3 中的一個內(nèi)置指令，很多表單元素都可以使用這個屬性，如 input、checkbox 等，咱可以在自定義組件中實(shí)現(xiàn) v-model，這篇文章主要介紹了Vue3 SFC 和 TSX 方式自定義組件實(shí)現(xiàn) v-model,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue.js組件高級特性,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件遞歸、模板、動態(tài)加載、渲染等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
vue使用自定義指令實(shí)現(xiàn)按鈕權(quán)限展示功能
這篇文章主要介紹了vue中使用自定義指令實(shí)現(xiàn)按鈕權(quán)限展示功能，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了uniapp和vue的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10