例如访问url为 http://www.myapp.com/my-app/
1、修改项目下的 vue.config.js
部署环境改为子目录的名称
2、nginx配置
这里使用alias ,不能用root
server {
listen 8080;
server_name www.xhl.com;
location /my-app {
alias /var/myapp/dist/;
}
}
3、alias和root的区别
#当客户端请求是 /my-app/js/util.js 时
location /my-app {
root /var/myapp/dist/;
}
#root映射结果为 /var/myapp/dist/my-app/js/util.js
#(实际util.js 文件是在dist/js/目录下,这样会访问不到资源)
location /my-app {
alias /var/myapp/dist/;
}
#alias映射结果为 /var/myapp/dist/util.js
4、前后端分离,正式环境nginx配置
设置正式环境下后端接口调用,src/config/index.js 中的baseUrl.pro
baseUrl: {
dev: 'http://127.0.0.1:8090/xhl/',
pro: 'http://www.xhl.com/abc/'
}
配置nginx,前后端程序在同一台服务器上,所以直接用了127.0.0.1
location /abc/ {
proxy_pass http://127.0.0.1:8090/xhl/;
}
5、刷新后404的问题,模式设置为hash可解决,路径中会有#
通过history api,我们丢掉了丑陋的#,怕刷新,f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的。
在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来