vue-cli 3.x下如果需要自定义配置,需要在项目的根目录添加一个vue.config.js,在这个文件中,我们可以进行一些个性化定制。
修改dist路径:
module.exports = {
baseUrl: './'
}
代理服务器配置:
module.exports = {
baseUrl: './',
devServer: {
proxy:{
'/auth/':{
target:'http://www.***.com/',
changeOrigin:true
}
}
}
}
记得ajax请求时是/auth/开头的url,千万别在前面加上域名了,这种低级错误我犯了好几次啦。。。。下面是稍微复杂点的配置,有关有关完整选项,请参阅http-proxy-middleware。
'/api': {
//设置你调用的接口域名和端口号 别忘了加http
target: 'http://40.00.100.100:3002/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
//这里理解成用‘/api’代替target里面的地址,
//后面组件中我们掉接口时直接用api代替 比如我要调
//用'http://40.00.100.100:3002/user/add',
//直接写‘/api/user/add’即可
}
}
更多vue-cli 3.x 详细配置:
module.exports = {
// 基本路径
baseUrl: '/',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
}, // 第三方插件配置
pluginOptions: { // ...
}
}
更多详细参考请移步:https://github.com/vuejs/vue-cli/tree/dev/docs/config