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
在后添加

<Proxy *>
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