vue.js创建网站实例6
上线前，注释 src/main.js 中的如下代码：
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock')
mockXHR()
}
vue-admin-template打包部署后，在服务器上访问端口404错误
百度搜来的，意思是在本机开发时，自带了代理服务器，部署到服务器上后，只是静态文件，不带代理服务器，需要自己设置代理。
打包命令：
npm run build:prod
打包后的文件在dist文件夹中
vue-admin-template版本4.4
后台接口地址http://bb.xxx.cn/manage/login/login.php
解决方案：
1.修改vue.config.js
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: 'https://aa.xxx.cn/',
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
2.修改.env.production
VUE_APP_BASE_API = ‘/manage’
3.服务器使用phpstudy，开启Nginx
4phpstudy中选择设置-配置文件-vhosts.conf-对应的站点，如果是http自动跳转https的情况，直接选择https进行设置即可
5.在server{}中添加
location ^~ /manage/ {
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://bb.xxx.cn/manage/;
}
proxy_set_header的作用是转发请求头信息，我第一次测试的时候是不能接收到变量，复制了这三行就可以使用了，第二天接口竟然404 了，找了两天，把这3行注释了竟然又可以了，proxy_pass是转发地址，这段的意思就是把原地址manage后面的路径拼接到转发的地址后面
6.重启Nginx
----------------------------我是分割线-------------------------
7.如果服务器使用Apache，打开phpstudy的“设置-配置文件-vhosts.conf”，也可以使用editplus进行编辑，路径：X:\phpstudy_pro\Extensions\Apache2.4.39\conf\vhosts\后台url_443.conf
在后添加
*>
Order deny,allow
Allow from all
</Proxy>
ProxyPass /manage http://127.0.0.1:8081/manage
ProxyPassReverse /manage http://127.0.0.1:8081/manage
8.新建域名为127.0.0.1，端口为8081的网站，网站目录为接口文件夹，如图：
9.重启Apache
- vue.js创建网站实例1
- vue.js创建网站实例2
- vue.js创建网站实例3
- vue.js创建网站实例4
- vue.js创建网站实例5
- vue.js创建网站实例6