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进行设置即可
vue.js创建网站实例6_第1张图片

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的网站,网站目录为接口文件夹,如图:
vue.js创建网站实例6_第2张图片
9.重启Apache

  • vue.js创建网站实例1
  • vue.js创建网站实例2
  • vue.js创建网站实例3
  • vue.js创建网站实例4
  • vue.js创建网站实例5
  • vue.js创建网站实例6

你可能感兴趣的:(web前端)