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 devnpm run serve

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

三、更多配置

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章