Vue生产环境和开发环境的配置

1、创建开发环境和生产环境的文件

根据vue cli 官网(https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F)的解释，我们可以直接在src同级目录下创建.env.development和.env.production，这个两个文件

image.png

2、在不同的环境变量文件中放置我们需要的参数

.env.production 这个文件配置的是生产环境的变量，放置线上访问的路径

VUE_APP_URL=https://cli.vuejs.org/ 

.env.development 这个文件配置的是开发环境的变量，可以让我们在本地访问线上的路径

VUE_APP_URL=https://cli.vuejs.org/ 

3、根据vue cli 官网的描述，创建vue.config.js文件配置参数

// 这个地方的参数配置可以参照vue cli https://cli.vuejs.org/zh/config/#全局-cli-配置，根据项目需要进行配置
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path' : './', 
    outputDir: 'dist',
    devServer: {
        proxy: {
            '/api': {
                target: '线上接口地址',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'  // 根据之前vuejs的配置，用来拿掉URL上的（/api），但是暂时没有什么效果
                }
            },
        }
    }
}

4、创建mock.api.js文件，用来集中放置接口

import Vue from 'vue';
const api = process.env.VUE_APP_URL ? process.env.VUE_APP_URL : '/api';

export const APIROUTER = {
        'login':  api + '/admin/login.do', // 登录
}

Vue.prototype.$api_router = APIROUTER; // 直接声明出去

5、在main.js 中引入 mock.api.js

import './mock.api'; // 接口API

6、使用api接口

在components文件夹下创建login.vue