11.22 vue實戰——自定義基礎路徑，端口號技术頭條網

承接上文，設置環境變量：

配置了環境變量有什麼意義呢？當然是方便部署了。配置了環境變量後，就可以在自定義配置文件中，使用，比如配置基礎路徑、端口號等。那，如何配置呢？我們通過上文創建的項目，news-list中沒看到有可以自定義的地方，彆著急。這需要我們添加一個新的文件：vue.config.js。

在項目根目錄下，創建文件：vue.config.js

項目目錄

這個文件是做什麼的呢？原來，vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。

這個文件應該導出一個包含了選項的對象：

// vue.config.js
module.exports = {
 // 選項...
}

那麼，基礎路徑該怎麼寫呢？我們在一般的文檔中會發現，有的寫法是這樣的：

module.exports = {
 baseUrl: '/myapp'
}

但是，baseUrl從 Vue CLI 3.3 起已棄用，我們應該用publicPath。這個屬性表示的是項目之前的公共路徑，項目默認假設你的應用將會部署在域名的根部，比如 https://www.my-app.com/。如果你的應用時部署在一個子路徑下，那麼你需要在這裡指定子路徑。比如，如果你的應用部署在：https://www.my-app.com/my-app/，那麼將這個值改為 `/my-app/`。這個值也可以被設置為空字符串 ('') 或是相對路徑 ('./')，這樣所有的資源都會被鏈接為相對路徑，這樣打出來的包可以被部署在任意路徑。

從官方文檔中，我們可以發現，publicPath是字符串類型，默認值就是'/'，也就是根目錄。同時這個值在開發環境下，同樣生效。那如何與上文的自定義配置關聯呢？原來，環境變量中的以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端的包中(即在項目代碼中使用)。你可以在應用的代碼中這樣訪問它們：

console.log(process.env.VUE_APP_BASEURL)

因此，在.env.dev中，我們定義了一組數據：

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '/dev'
VUE_APP_PORT = '8001'

同時，在vue.config.js中，我們引用上面的基礎路徑：

module.exports = {
 publicPath: process.env.VUE_APP_BASEURL
}

然後，啟動項目：

npm run dev

我們會發現，啟動日誌顯示：

訪問一下，發現基礎路徑出現了一個dev，沒錯。這就是我們設定的基礎路徑了。

但是我們發現，端口號還是默認的8080，如果系統中，這個端口號被佔用了，我們想自定義一個，該怎麼辦呢？同樣的，在自定義配置文件中，我們這樣寫：

devServer: {
 port: process.env.VUE_APP_PORT
 }

process.env.VUE_APP_PORT依然是在自定義環境變量中的值。

這樣在啟動項目後：

我們發現，端口號變成了我們之前設定的8001了。

全部的配置文件如下：

// vue.config.js
// 官方文檔
// https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
module.exports = {
 // 項目部署的基礎路徑 

 // 我們默認假設你的應用將會部署在域名的根部，
 // 比如 https://www.my-app.com/
 // 如果你的應用時部署在一個子路徑下，那麼你需要在這裡
 // 指定子路徑。比如，如果你的應用部署在
 // https://www.my-app.com/my-app/
 // 那麼將這個值改為 `/my-app/`
 // 這個值也可以被設置為空字符串 ('') 或是相對路徑 ('./')，
 // 這樣所有的資源都會被鏈接為相對路徑，這樣打出來的包可以被部署在任意路徑
 publicPath: process.env.VUE_APP_BASEURL,
 devServer: {
 port: process.env.VUE_APP_PORT
 }
}