vue-cli 3项目配置——反向代理的配置(2)

关于package.json 说明

"serve": "vue-cli-service serve",  //开发环境下的脚本
"build": "vue-cli-service build",   //生产环境下构建， yarn build 打包 dist 文件夹 给后端上线项目
"lint": "vue-cli-service lint"      //检查eslint 的风格

npm run lint  webpack里面的命令 自动修复代码
npm run build 打包命令，给后端就OK了

反向代理的配置

改变服务器的运行状态，解决跨域

1.在项目中与package.json同级的地方创建一个文件叫 vue.config.js的文件，改吧改吧，留下自己需要的

module.exports = {
  devServer: {
    proxy: {
      '/ajax': { // '*' 如果是* 代表所有的请求都会被代理
        target: 'https://m.maoyan.com', // 只要是/ajax开头的都会转换到https://m.maoyan.com这里的服务器去请求
        // ws: true,
        changeOrigin: true
      }
    //   如果后端接口不止一个 就可以继续如下代码配置
    // '/foo': {
    //   target: '<other_url>'
    // }
    }
  }
}

2.页面中的请求接口改为这样
3.只要改了配置文件一定要重启服务器，重新启动好以后，重新刷新页面

4.请求成功！意味着反向代理配置成功，好了，接下来你可以为所欲为了。