20191119_VUE打包后代理失效的问题

VUE打包后代理失效的问题

当vue对接的接口没有开启可跨域的模式的情况下，我们需要开启代理，但是不同环境的代理是不一样的。

开发环境

在开发环境下，我们需要在vue.config.js中配置代理。

devServer:{
    proxy: {
      '/api': {
        target: '',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': 'http://xxx.com/api'
        }
      }
    }
  }

调用接口的时候以api开头，就会自动代理到http://xxx.com/api

生产环境

但是当你打包之后，你会发现出了点问题，接口请求是404。

打包到phpstudy运行

npm run build之后生成dist文件夹，然后将文件夹丢到phpstudy的www文件夹下面，运行phpstudy，访问localhost:8080/dist文件夹即可。

（这里我的端口号是81，所以我访问的是http://localhost:81/dist/#/index)

解决打包后代理失效的问题

当你打开页面之后会发现，所有的接口请求是404,百度之后告知，打包之后的代理是不生效的，我们需要在vue中修改，将api开头的接口修改为``http://xxx.com/api`开头。

=避免被打的分界线=

如果上面这句话你看着很坑爹，你可以这么干，在vue项目下面新增两个文件.env.dev和.env.production

// .env.dev
NODE_ENV='dev'         

// .env.production
NODE_ENV='prod'  

修改package.json

"scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode production"
  },

然后在你的全局配置base_url那里使用下面的方法

if (process.env.NODE_ENV === "'dev'"){
      base_url = 'api'
} else {
     base_url = 'http://xxx.com/api`'
}

=分界线结束=

确保你的phpstudy是用的nginx（选择切换版本，查看是否是用的nginx，我原先用的apache，然后就傻了…)

然后打开 其它选项=》打开配置文件=》nginx-conf，在里面的server增加这么一句话:

location /admin {
      proxy_pass http://xxx.com/;   // 记得加斜杠啊
}

由于不支持api开头做代理，我们要将生产环境下的base_url修改为

if (process.env.NODE_ENV === "'dev'"){
      base_url = 'api'
} else {
     base_url = 'http://xxx.com/admin/api'
}

最后附上一句我还没怎么消化完的话