vue前端打包部署（若依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/; }