hexo-blog/source/_posts/vue-cli-代理设置以及打包引入配置.md

title, tags, id, categories, date

title	tags	id	categories	date
vue CLI 代理设置以及打包引入配置		173	分享	2017-10-17 15:25:49

代理设置

在用 vue CLI 做开发的时候，很多时候我们需要用到代理请求获取数据，vue CLI 也很方便的为我们提供配置代理的API，打开vue CLI项目的 /config/index.js 文件，找到dev里的proxyTable

module.exports = {
  //代理设置
  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/data': {
        target: 'http://dengtongyu.com',  //代理目标地址
        secure: false,
        changeOrigin: true
      }
    },
    cssSourceMap: false
  }
}

打包引入配置

我们用vue CLI打包项目的时候默认引入的资源是"/"根目录，如果我们的项目在非根目录下就要重新配置一下了，同样的，打开vue CLI项目的 /config/index.js 文件，找到build里的assetsPublicPath

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/pages/myproject/',   //配置引入资源的根目录
    productionSourceMap: true,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }