VUE前端打包到测试环境的解决方法

 更新时间:2022年12月20日 11:49:29   作者:Yilia-Feng  
这篇文章主要介绍了若依VUE前端打包到测试环境,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

一、打包

1、测试环境打包命令

npm run build:stage

2、生产环境打包命令

npm run build:prod

二、前端代码中修改内容

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

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

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
})

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

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

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

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

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)
  }
}

三、修复部署到测试环境

页面样式错乱

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

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

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

四、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/;
}

到此这篇关于若依VUE前端打包到测试环境的文章就介绍到这了,更多相关vue打包到测试环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3组件化开发常用API知识点总结

    vue3组件化开发常用API知识点总结

    Vue是目前Web前端最流行的开发框架技术, 下面这篇文章主要给大家介绍了关于vue3组件化开发常用API的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • vue+elementUI中表格高亮或字体颜色改变操作

    vue+elementUI中表格高亮或字体颜色改变操作

    这篇文章主要介绍了vue+elementUI中表格高亮或字体颜色改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • uniapp前端实现微信支付功能全过程(小程序、公众号H5、app)

    uniapp前端实现微信支付功能全过程(小程序、公众号H5、app)

    这篇文章主要介绍了uniapp前端实现微信支付功能的相关资料,通过uniapp开发跨平台应用时,需要处理不同平台的支付方式,包括微信小程序支付、公众号H5支付和App支付,需要的朋友可以参考下
    2024-09-09
  • Vue3中导航守卫的使用教程

    Vue3中导航守卫的使用教程

    在Vue3中,导航守卫(Navigation Guards)用于在路由切换前后执行一些操作,例如验证用户权限、取消路由导航等,本文主要为大家介绍了vue3中导航守卫的使用方法,需要的可以参考下
    2023-08-08
  • 如何在Vue.JS中使用图标组件

    如何在Vue.JS中使用图标组件

    这篇文章主要介绍了如何在Vue.JS中使用图标组件,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-08-08
  • vue数据字典取键值方式

    vue数据字典取键值方式

    这篇文章主要介绍了vue数据字典取键值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3 SFC 和 TSX 方式自定义组件实现 v-model的详细过程

    Vue3 SFC 和 TSX 方式自定义组件实现 v-model的详细

    v-model 是 vue3 中的一个内置指令,很多表单元素都可以使用这个属性,如 input、checkbox 等,咱可以在自定义组件中实现 v-model,这篇文章主要介绍了Vue3 SFC 和 TSX 方式自定义组件实现 v-model,需要的朋友可以参考下
    2022-10-10
  • Vue.js组件高级特性实例详解

    Vue.js组件高级特性实例详解

    这篇文章主要介绍了Vue.js组件高级特性,结合实例形式详细分析了vue.js组件递归、模板、动态加载、渲染等相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • vue使用自定义指令实现按钮权限展示功能

    vue使用自定义指令实现按钮权限展示功能

    这篇文章主要介绍了vue中使用自定义指令实现按钮权限展示功能,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • uniapp和vue的区别详解

    uniapp和vue的区别详解

    这篇文章主要介绍了uniapp和vue的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-10-10

最新评论