在实际开发中, 使用 vue 后就是前后端分离开发了, 这时候我们就需要访问后台的接口来拿到数据, 需要 URL,name,password 来获取到 token 才能正常使用接口, 下面就来配置.
1, 找到 config 文件夹, 在 prod.env.JS 中添加一下代码 (若没有此 JS, 自己创建一个就可以了)
- 'use strict'
- module.exports = {
- NODE_ENV: '"production"',
- API_ROOT: '"//123.116.245.150:18081/API"',/*j 后台接口地址 */
- USER_NAME: '""',/* 账号 */
- PASS_WD: '""'/* 密码 */
- }
2, 找到 config 文件夹, 在 dev.env.JS 中添加下面代码.
- 'use strict'
- const merge = require('webpack-merge')
- const prodEnv = require('./prod.env')
- module.exports = merge(prodEnv, {
- API_ROOT: '"//125.116.245.101:18081/API"',/* 后台接口地址 */
- USER_NAME: '"小小小"',/* 账号 */
- PASS_WD: '"123456"',/* 密码 */
- })
然后再登录页面的 from 中调用这里写的变量
- form: {
- name: process.env.USER_NAME,
- password: process.env.PASS_WD,
- },
在 main.JS 中设置头部拦截器, 代码如下
- const url = process.env.API_ROOT;
- axios.interceptors.request.use(
- config => {
- let token = localStorage.getItem("x-auth-token");
- if (token) { // 判断是否存在 token, 如果存在的话, 则每个 http header 都加上 token
- config.headers.token = `${token}`;
- }
- if (config.url.indexOf(url) === -1) {
- let getTimestamp=new Date().getTime();
- if(config.url.indexOf('?')>-1){
- config.url = url + config.url +"*tamp="+getTimestamp;
- }else{
- config.url = url +config.url +"?timestamp="+getTimestamp;
- }
- }
- return config;
- },
- err => {
- alert(err)
- return Promise.reject(err);
- });
这样访问后台接口配置就完成了!
来源: http://www.jb51.net/article/147650.htm