vue-cli开发环境以及生产环境配置
开发时候，开发环境接口和正式环境的接口是不一样的，开发环境是请求本地接口，正式环境请求服务器接口。
每次测试和打包的时候，都需要手动配置一下接口配置，切换开发环境接口名称，切来切去甚是麻烦。
苦思许久，找资料，发现webpack可以自动配置开发环境和生产环境的，具体操作如下。
要修改的文件目录结构
--- | config
--- dev.env.js
--- index.js
--- prod.env.js
dev.env.js （开发环境配置）
NODE_ENV: '"development"',
API_URL: '"/api/a/"', //注：api代表本地代理的名字， a代表通用接口重复(可以不写)名
prod.env.js (生产环境配置）
NODE_ENV: '"development"',
API_URL: '"/a/"',
index.js (基本配置 主要为了配置开发环境代理)
dev: {
env: require('./dev.env'),
port: process.env.PORT || 2222,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://10.1.1.1:3000', //要代理的本地地址
changeOrigin: true,
secure: false,
pathRewrite: {
'^/api': '' //代理名字
}
}
},
这时候，就可以在通用js文件定义接口请求, 比如 utils.js
var utils = {
...,
API: process.env.API_URL, //process.env，代表当前的环境
...
}
export default utils
这时候就可以直接在 vue 文件，直接引入 utils.js ,然后发起接口请求，直接调用
axois.get('http://10.1.1.1:3000/api/a/xxx...', ...)
本地开发 npm run dev，实际接口访问的本地代理地址为， http://10.1.1.1:3000/api/a/xxx...
生产环境 npm run build, 实际接口访问地址为， /a/xxx...
针对样式或src引入alias路径配置
在使用 vue-cli 开发项目时候，webpack aliases 配置了一个 "@" 可以指向到 ‘src’目录
比如在<script>里 import a from '@/vue/a 就可以拿到 /scc/vue/a 的文件
但是在<style> 标签里引入 import b from '@/assets/scss/b 想拿到 /src/assets/scss/b 但是这时候就打印错误了。。。
ERROR in ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App/index.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./assets/logo.png in /Users/Alex/Work/testing/quick/src/App
@ ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App/index.vue 1:55-83
根据 github的issue html image src require not respecting webpack aliases? 尤大回答的问题，
**vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~: **
<img class="logo" src="~assets/logo.png">
所以上面的问题改成 import b from '~@/assets/scss/b 就可以啦
