Vue-Cli 4版本运行环境配置

一、问题描述

Vue-Cli自3.x以上版本取消了config目录，我们没法直接在config目录下的文件中对运行环境进行配置，因此需要开发者手动完成配置。

二、配置方法

1.新建vue.config.js文件

在项目的根目录新建vue.config.js文件，并在该文件中配置相应的启动项。

// vue.config.js

module.exports = {
module.exports = {
    devServer: {  // 开发调试服务器配置项
        open: true,  // npm run serve后自动打开页面
        host: '0.0.0.0',  // 匹配本机IP地址
        port: 9009,  // 开发服务器运行端口号
        compress: true,  // 启用静态资源压缩算法
        proxy: {
            '/api': {// 匹配所有以 '/api'开头的请求路径
                target: 'http://localhost:8090', // 代理目标的基础路径
                changeOrigin: true,
                pathRewrite: {// 重写路径: 去掉路径中开头的'/api'
                    '^/api': ''
                }
            }
        }
    }
};

2. 启动项目

配置并保存vue.config.js文件后，

在项目根目录运行npm run dev或npm run serve。

具体启动命令请根据vue-cli版本和配置项输入，上面两条命令仅供参考。

三、更多配置

关于vue.config.js文件中的更多配置项，

可参考Vue-Cli官方文档中的“配置参考”：https://cli.vuejs.org/zh/config/