02.eslint打包、反向代理配置（跨域）

eslint打包

在cmd命令行中执行：

npm run lint

作用：格式化代码，使其符合eslint标准。（实验的时候，在npm run serve的时候，有时候会报出警告信息，提示代码格式问题，此时可以来执行npm run lint。项目目录会多出dist文件夹，这个是格式化、压缩之后的文件，可以直接交给后端。）

反向代理配置

安装axios:在cmd命令行中：

cnpm install --save axios

尝试请求猫眼电影地址

//===>src/App.src
<script>
import navbar from "./components/Navbar";
import sidebar from "./components/Sidebar";
import axios from "axios";
export default {
 ...
  mounted() {
    axios
      .get(
        "https://m.maoyan.com/ajax/mostExpected?ci=40&limit=10&offset=0&token=&optimus_uuid=B6BAB990A08011EAB779B9318588518547B90EEDF7814A73BFBDF558B7E483DA&optimus_risk_level=71&optimus_code=10"
      )
      .then(res => {
        console.log(res.data);
      });
  }
...
</script>

因为跨域了，会报错：

image.png

跨域配置参考

参考文档:https://cli.vuejs.org/zh/config/#devserver-proxy

实战

1.先添加配置文件

image.png

//===>根目录vue.config.js
module.exports = {
  lintOnSave: false,    //这句话跟跨域没关系，是禁止lint检查用的
  devServer: {
    proxy: {
      '/ajax': {   
       //项目里/ajax开头的请求，会自动代理到‘target’标签中的地址
        target: 'http://m.maoyan.com',
        // ws: true,
        changeOrigin: true
      },
      // '/foo': {
      //   target: '<other_url>'
      // }
    }
  }
}

2.修改请求

//===>src/App.src
<script>
import navbar from "./components/Navbar";
import sidebar from "./components/Sidebar";
import axios from "axios";
export default {
 ...
  mounted() {
    axios
      .get(
        "/ajax/mostExpected?ci=40&limit=10&offset=0&token=&optimus_uuid=B6BAB990A08011EAB779B9318588518547B90EEDF7814A73BFBDF558B7E483DA&optimus_risk_level=71&optimus_code=10"
      )
      .then(res => {
        console.log(res.data);
      });
  }
...
</script>

3.因为修改了项目配置，所以要重启项目

可以跨域请求了