初始化

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

@@ -0,0 +1,54 @@
+---
+title: vue CLI 代理设置以及打包引入配置
+tags: []
+id: '173'
+categories:
+  - - 分享
+date: 2017-10-17 15:25:49
+---
+
+## 代理设置
+
+在用 [vue CLI](https://www.npmjs.com/package/vue-cli) 做开发的时候，很多时候我们需要用到代理请求获取数据，[vue CLI](https://www.npmjs.com/package/vue-cli) 也很方便的为我们提供配置代理的API，打开[vue CLI](https://www.npmjs.com/package/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](https://www.npmjs.com/package/vue-cli)打包项目的时候默认引入的资源是"/"根目录，如果我们的项目在非根目录下就要重新配置一下了，同样的，打开[vue CLI](https://www.npmjs.com/package/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
+  }
+```