快捷導(dǎo)航

VUE前端打包到測(cè)試環(huán)境的解決方法

更新時(shí)間：2022年12月20日 11:49:29 作者：Yilia-Feng

這篇文章主要介紹了若依VUE前端打包到測(cè)試環(huán)境,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、打包

1、測(cè)試環(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)擊/刷新】菜單的時(shí)候404bug）
注意：/admin/ 是你們自己nginx中的目錄正常是/dist/

export default new Router({
	mode: 'history', // 去掉url中的#
	scrollBehavior: () => ({ y: 0 }),
  	base: "/admin/", // nginx 非根目錄需要加base，不然到時(shí)候路由進(jìn)不去
 	routes: constantRoutes
})

3、vue.config.js （例如 https://www.ruoyi.vip/。如果應(yīng)用被部署在一個(gè)子路徑上，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑。例如，如果你的應(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版本問(wèn)題）

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ù)部署到測(cè)試環(huán)境

頁(yè)面樣式錯(cuò)亂

問(wèn)題描述：本地開(kāi)發(fā)時(shí)組件的樣式使用scoped進(jìn)行局部樣式設(shè)置，但是打包編譯到測(cè)試環(huán)境以后發(fā)現(xiàn)，組件里面的樣式會(huì)被編譯成2個(gè)樣式，一個(gè)全局樣式跟局部樣式，從而導(dǎo)致組件的樣式污染到其它同名的樣式

解決方法：找到vue.config.js文件進(jìn)行如下配置修改

 css: {
    // loaderOptions: {
    //   sass: {
    //     sassOptions: { outputStyle: "expanded" }
    //   }
    // }
    extract:false,
    sourceMap:false
 }

四、nginx配置

配置測(cè)試環(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前端打包到測(cè)試環(huán)境的文章就介紹到這了,更多相關(guān)vue打包到測(cè)試環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: