54 lines
1.6 KiB
Markdown
54 lines
1.6 KiB
Markdown
---
|
|
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
|
|
}
|
|
``` |