Vue方向：理解vue.config.js配置文件

[官方API]https://cli.vuejs.org/zh/config/#
vue.config.js是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被@vue/cli-service自动加载，也可以使用package.json中的vue字段

1、proxy代理

Type : string | Object
前端的应用和后端API服务器没有运行在同一个主机上，需要在开发环境中将API请求代理到API服务器，这个可以通过vue.config.js中的devServer.proxy选项来配置。

devServer:{
  port:8000, //端口号
  proxy: {
       '/api' : {
            target : 'https://localhost:4000',
            ws : true,//有webscoket请求的时候把这个设置成true
            changeOrigin : true
        },
        //可以反向代理多个
        '/foo' : {
            target : 'https://localhost:5000'
        }
    }
}

下面进行测试，通过反向代理获取猫眼电影的接口数据信息.
1. 新建vue.config.js文件，配置相关猫眼相关代理部分

module.exports = {
    devServer: {
        proxy: {
            '/ajax': {
                target: 'http://m.maoyan.com',
                //ws: true,//有webscoket请求的时候把这个设置成true
                changeOrigin: true
            },
        }
    }
}

2. 项目中安装axios，通过axios去调取接口获取接口数据

      

        电影名称: {{ item.nm }} 
        上映时间: {{ item.rt }} 
        电影明星: {{ item.star }}
      

import axios from "axios";
export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    axios.get("/ajax/movieOnInfoList?token=").then((res) => {
      this.data = res.data.movieList;
    });
  },
};

成功获取到接口返回的数据.png

2、alias别名配置

@是一个alias，意味着从根目录下面开始查找文件

3、配置publicPath:'./'

在Cordova hybrid应用中做混合开发的时候，有时候本地的目录是/app，但是需要编译后为./app，就可以使用这个处理，这个publicPath属性就是编译后去修改路径。

4、关闭eslint

在vue.config.js中，使用
lintOnSave : false去关闭eslint代码校验
再把.eslintrc删除掉或者把@vue/standard注释掉

5、在MPA模式下开发构建页面的配置

在multi-page模式下构建应用，每个page应该有一个对应的JavaScript入口文件，其值应该是一个对象，对象的key是入口的名字，value是:

• 指定了entry, template, filename, title, 和chunks的对象(除了entry其他都是可选的)
• 或一个指定其entry的字符串

module.exports = {
    pages:{
          index:{
            // page的入口
             entry : 'src/index/main.js',
             // 模板来源
              template : 'public/index.html',
             // 在dist/index.html的输出
              filename : 'index.html',
              // 当使用title选项时
              // template中的title标签要是
              title : 'Index Page',
              // 在这个页面中包含的块，默认情况下会包含
              // 提取出来的通用 chunk和 vendor chunk
              chunks : ['chunk-vendors' , 'chunk-common' , 'index']
          },
              // 当使用只要入口的字符串格式时
              // 模板会被推导为 'public/subpage.html'
              // 并且如果找不到的话，就会被回退到'public/index.html'
              // 输出文件名会被推导为'subpage.html'
              subpage : 'src/subpage/main.js'
      }
}