在使用若依框架时,如果非根目录的情况下,需要进行一部分设置
1、修改项目router配置,router=>index.js:
export default new Router({
base: '/vuejs-admin/',
mode: 'history', // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
这里一是要修改router模式为history,另一个就是修改base地址为要访问的/vuejs-admin地址,注意前后都有斜线
2、修改build下静态资源路径前缀 我觉得这一步可以不用
同上一部,这里要修改assetsPublicPath为/vuejs-admin/地址
3、执行vuejs打包:npm run build
确保打包后所有静态资源均是相对地址/vuejs-admin开头,比如:
4、修改nginx配置,使用rewrite配置 我觉得这一步可以不用
server {
listen 80;
server_name xxxx.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location /vuejs-admin-server {
proxy_pass http://127.0.0.1:8080/vuejs-admin-server;
}
location ^~/vuejs-admin {
alias /home/server/webapps/vuejs-admin/;
#index index.html;
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^/(vuejs-admin)/(.+)$ /$1/index.html last;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
5、热重载nginx,搞定收工:nginx -s reload
6、另外最重要的一点是,当进行了上述一系列的设置,正常访问都没问题了,但是注销时还是会出现404页面,原因就是代码中的注销操作是直接赋值的,需要修改组件layout中的Navbar.vue文件
this.$store.dispatch('LogOut').then(() => {
location.href = '/***';//这里改成自己的子目录名
})