最近用 vue 开发项目, 感觉手生, 所以到处找资料, 补充不足.
这里记录下关于接口的配置问题:
需要配置的文件:
- /config/dev.env.JS // 本地开发配置
- /config/prod.env.JS // 线上打包配置
在 dev.env.JS 里面
- 'use strict'
- const merge = require('webpack-merge')
- const prodEnv = require('./prod.env')
- module.exports = merge(prodEnv, {
- NODE_ENV: '"development"',
- API_ROOT: '"开发环境地址"'
- })
在 prod.env.JS 里面
- 'use strict'
- module.exports = {
- NODE_ENV: '"production"',
- API_ROOT: '"线上地址"'
- }
注意: 本地开发会用到 webpack 的代理, 开发环境的 API 地址已经被代理了, 在 / config/index.JS 里面的 proxyTable, 所以线下地址不能写成你实际的线下地址, 而是要写成你这里代理后的地址, 就是带有 API 的那种地址
代理处理跨域
在 / config/index.JS 里的 proxyTable, 现在最新的 vue-cli 不需要特意安装插件了 直接修改这个文件即可
- proxyTable: {
- '/apis': {
- // 将 www.exaple.com 印射为 / apis
- target: 'https://www.exaple.com/', // 接口域名
- changeOrigin: true, // 是否跨域
- pathRewrite: {
- '^/apis': '' // 需要 rewrite 的,
- }
- }
- }
使用方法
最好是把所有的请求都封装一下, 不管是为了以后修改还是其他什么
在请求之前拼接地址
const root = process.env.API_ROOT;
这个 root 就是对应的地址,
NPM run dev
开发环境会使用 dev.env.JS 里的 API_ROOT
NPM run build
线上环境会使用 prod.env.JS 里的 API_ROOT
在每个请求的地方
root+'/getlist'
如果没有封装的话, 则需在每个 ***.vue 文件内
const root = process.env.API_ROOT;
然后使用 root+'/getlist'
注意: 每次配置完成后要重启下项目, 这样才能看到是否生效
可以在入口 vue 文件内 log 一下测试
- const root = process.env.API_ROOT;
- // 然后在 created(){
- }, 这个函数内打印一下 root 如果是你设置的 就说明设置成功
来源: http://www.qdfuns.com/article/36713/0ed7ce861b442e977441d2edf8f85598.html