vue-cli 3.x 修改dist路径及代理服务器配置

2019-04-104238次阅读vue

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

上一篇: ES6 Promise兼容IE6+引出对es3ify-webpack-plugin的理解  下一篇: Document.scrollingElement获取设置网页窗体滚动高度  

vue-cli 3.x 修改dist路径及代理服务器配置相关文章