您现在的位置是:首页 >其他 >若依VUE前端打包到测试环境网站首页其他
若依VUE前端打包到测试环境
事先准备环境
先给安装webpack和serve
cmd打开窗口
npm install webpack -g // 全局安装,下次项目就不用再执行这步了
或者
npm install webpack --save-dev // 项目内安装
或者
npm add webpack@latest
如果你没有装这个,num run build 你就会报错:Class extends value undefined is not a constructor or null
然后全局安装(最终要放的服务器也要有这个):
npm install -g serve
成功提示:
+ serve@11.3.2
added 78 packages from 39 contributors in 17.701s
如果不装就不能serve dist 就会报错
一、打包
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/;
}