vue搭建项目和相关配置

一、创建项目

二、配置webpack和环境
1.在项目跟路径下，新建 vue.config.js 文件

module.exports = {
    publicPath: './',      // 打包后的基本路径
    lintOnSave: false,    // 保存时 不使用 EsLint 检查
    outputDir: process.env.outputDir,
    devServer: {
        port: 8090,         // 端口号
        proxy: {
            '/api': {
                target: "http://192.168.2.49:8090",     // 本地调试接口, 本机localhost：xxx
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "/"
                }
            }
        }
    }
}

2. 在根目录下新建 .env.development 文件（该文件没有注释功能，一定要删掉。本处只是方便阅读）

NODE_ENV = 'development'	// 模式-开发环境（该文件是没有注释的，真正用到时需去掉，下同）
VUE_APP_MODE = 'development'	//通过"VUE_APP_MODE"变量来区分环境
VUE_APP_API_URL = 'http://192.168.2.49:10920/bcz/api/'	// 本地调试的api地址

3. 在根目录下新建 .env.production 文件

NODE_ENV = 'production' // 模式-生产环境
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'https://bc.yncgj.cn:10009/bcz/api/'	// 线上服务器的api地址

三、封装配置Axios
1. 安装 axios， npm install axios 。 如果报错，可以npm install core-js --save以下。或者删掉node_modules，重新 npm install
2.在src文件下新建api文件夹（也可以utils，自行），在该文件夹下新建 request.js 文件

import axios from 'axios';
import qs from 'qs';

console.log(process.env.VUE_APP_API_URL);
if(process.env.VUE_APP_MODE === 'development'){
    //开发环境下的执行操作
    console.log('development环境');
}else{
    //生产环境下的执行操作
    console.log('production环境');
}

class XHR {
    constructor(config) {
      this.config = {
        // baseURL: 'https://www.fastmock.site/mock/.../traffic', // mock接口
        // baseURL: 'http://192.168.2.49:10920/bcz/api/',
        baseURL: process.env.VUE_APP_API_URL,
        headers: {},
        crossDomain: true
      }
      // 初始化 请求实例
      this.config = Object.assign(this.config, config)
      this.$request = axios.create(this.config);
      //请求拦截器 - 添加请求头会用到
    // this.$request.interceptors.request.use(
    //   config => {
    //     config.withCredentials = false;
    //     // console.log(sessionStorage.getItem('toKen'));
    //     if (sessionStorage.getItem('toKen')) {
    //       config.headers.Authorization = sessionStorage.getItem('toKen') + '';
    //     }
    //     return config;
    //   },
    //   error => {
    //     return Promise.reject(error);
    //   });
    }
  
    get(url, data) {
      return this.request(url, data, 'GET')
    }
  
    post(url, data, config = {}) {
      return this.request(url, data, 'POST', config)
    }
  
    request(url, data, method = 'GET', option) {
      // debugger
      // 格式化参数
      if (typeof data === 'string') {
        method = data
        data = {}
      }
      const config = {
        url,
        method
      }
      // 区分 post get
      if (method === 'GET') {
        config.params = data
        config.data = qs.stringify(data)
      } else {
        config.data = data
      }
  
      // 发起请求
      return this.$request(config).then(({
        data
      }) => {
        const result = {
          code: parseInt(data.code || 0),
          count: parseInt(data.count || 0),
          data: data.data,
          msg: data.message,
        }
        return result
      }).catch((error) => {
        error = error && error.toString()
        console.error('接口调用异常: error', error)
        if (error && (error.includes('Error:') || error.includes('<html'))) {
          error = '接口异常，请联系管理员！'
        }
        return Promise.reject(error)
      })
    }
  }
  
  export default XHR

3. 统一接口管理，在api文件夹下新建 interface.js 文件

import XHR from "./request";
const request = new XHR();

export default {
    /**
     * 获取设施
     */
    equipment: params => request.get(`/facilityType/queryFacilityTypeParentList`, params),
    /**
     * 根据参数获取详情
     */
    queryDetail: params => request.get(`/facility/queryDetail?${params}`),
    /**
      * 提交表单
      */
    submitForm: params => request.post(`/facility/save`, params),
}

4. 使用，可以自行在需要的页面中引入，也可以封装全局引用。全局使用示例：

import allRequest from './api/interface'
Vue.prototype.$http = allRequest;

Vue.use(allRequest);  // 本行代码只是测试配置是否ok

四、 测试和使用
1. 在 request.js 或 interface.js 中，使用以下语句，可以看到控制台输出什么环境，和以上配置有效

console.log(process.env.VUE_APP_API_URL);
if(process.env.VUE_APP_MODE === 'development'){
    //开发环境下的执行操作
    console.log('development环境');
}else{
    //生产环境下的执行操作
    console.log('production环境');
}

2. 在需要的页面中使用

methods: {
  async getInfo() {
	try {
		const { data } = await this.$http.equipment();
		console.log(data);
	} catch (error) {}
  }
}