vuecli4中如何配置打包使用相對路徑

Posted on by

配置打包使用相對路徑

使用vuecli4進行項目打包時，默認使用的是根目錄的方式，這樣打包直接項目直接運行就是一個大白屏，非常難受！

這時我們就需要在設置打包使用相對目錄的方式，設置過程非常簡單。

1.在vuecli跟目錄下添加 `vue.config.js`作為配置文件

2.添加以下配置：

module.exports = {
    //配置 運行和打包時的文件路徑
    publicPath:process.env.NODE_ENV==='production'?'./':'/',
}

3.重新編譯項目。

非常好用！

vue打包時的publicPath,就是打包後靜態資源的路徑

情況一

當不配置vue.config.js或者沒有publicPath屬性時，默認訪問的靜態路徑是服務器的根目錄

服務器根目錄下沒有js文件夾所以訪問失敗，把dist下的js,css等靜態文件剪切到wamp/www目錄下就可以正常訪問瞭（註意重啟wamp）

情況二

當配置為當前目錄’./’

訪問正常，其實publicPath當前目錄即打包後的index.html的當前目錄，即dist目錄，怎麼證明，把publicPath的值設置為’…/’，看看情況三

情況三

又報錯，把js,css等靜態文件復制到wamp/www目錄下試一下

訪問成功，說明：publicPath設置為當前目錄’./'就是dist目錄的設想，沒錯

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：