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/