[官方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去调取接口获取接口数据
<div v-for="item in data" :key="item.id">
<div class="info">
<span>电影名称: </span>{{ item.nm }}
<span>上映时间: </span>{{ item.rt }}
<span>电影明星: </span>{{ item.star }}
</div>
</div>
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><%= htmlWebpackPlugin.options.title %></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'
}
}
