若依VUE前端打包到测试环境

一、打包

1、测试环境打包命令

npm run build:stage
1

2、生产环境打包命令

npm run build:prod
1

二、前端代码中修改内容

1、Navbar.vue (修复退出登录404bug)

this.$store.dispatch('LogOut').then(() => {
	// location.href = '/index';
	this.$router.push(`/login?redirect=${this.$route.fullPath}`)
})
1
2
3
4

2、src/router/index.js（修复【点击/刷新】菜单的时候404bug）
注意：/admin/ 是你们自己nginx中的目录 正常是/dist/

export default new Router({
	mode: 'history', // 去掉url中的#
	scrollBehavior: () => ({ y: 0 }),
  	base: "/admin/", // nginx 非根目录需要加base，不然到时候路由进不去
 	routes: constantRoutes
})
1
2
3
4
5
6

3、vue.config.js （例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/ )

publicPath: process.env.NODE_ENV === ("production" || "test") ? "/admin/" : "/",
1

4、src/utils/request.js (修复退出登录404bug)

store.dispatch('LogOut').then(() => {
	// location.href = '/index';
 	this.$router.push(`/login?redirect=${this.$route.fullPath}`)
})
1
2
3
4

5、src/store/modules/permission.js（修复webpack版本问题）

export const loadView = (view) => {
	if (process.env.NODE_ENV === 'development') {
    	return (resolve) => require([`@/views/${view}`], resolve)
  	} else {
  		 // 使用 import 实现生产环境的路由懒加载
   		 // return () => import(`@/views/${view}`)
    	return (resolve) => require([`@/views/${view}`], resolve)
  }
}
1
2
3
4
5
6
7
8
9

三、修复部署到测试环境 页面样式错乱

问题描述：本地开发时组件的样式使用scoped进行局部样式设置，但是打包编译到测试环境以后发现，组件里面的样式会被编译成2个样式，一个全局样式跟局部样式，从而导致组件的样式污染到其它同名的样式

解决方法：找到vue.config.js文件进行如下配置修改

 css: {
    // loaderOptions: {
    //   sass: {
    //     sassOptions: { outputStyle: "expanded" }
    //   }
    // }
    extract:false,
    sourceMap:false
 }
1
2
3
4
5
6
7
8
9

四、nginx配置

配置测试环境代理： /stage-api/
配置生产环境代理： /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/;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26