vue 專案打包

作為乙個前端之前並沒有打包過專案，因此想一下打包的效果，記錄一下我的打包過程：作為乙個開端

首先，專案打包前的目錄結構

然後，執行命令列 npm run build

因為是第一次打包，不熟悉打包的過程，與檔案的變更，首先看了一下檔案的結構，發現沒有compenent與views中檔案的生成目錄。是沒有打包進去麼？後面發現是打包進去的

先看一下效果，看一下是否打包進入了。

當我執行的時候發現頁面報錯，是個空白頁

從網上查詢，說是需要將路徑變更一下，將相對路徑變成絕對路徑

需要修改的均是與build設定相關的檔案

assetspublicpath: '/'值為assetspublicpath: 『./』

build:

修改的資源路徑：

build=》util.js

修改build資料夾中util檔案,並查詢方法generateloaders，並在extracttextplugin.extract新增

publicpath:』…/…/'選項

// generate loader string to be used with extract text plugin

function generateloaders (loader, loaderoptions) , loaderoptions, )})}
// extract css when that option is specified
// (which is the case during production build)
if (options.extract) )
} else 
}

有興趣可以查詢相關說明，了解一下配置檔案中相關配置項的含義

vue專案打包

首先開啟config index.js，將assetspublicpath值改為 注意是build的一對花括號裡 assetspublicpath 這個在你的build的一對花括號裡，用來解決js,css路徑問題 然後開啟 build utils.js 加上publicpath 如下 return ...

Vue專案打包

解決方法 配置vue.config.js如下 module.exports 使用npm run build命令進行打包，但是直接開啟index.html是無法看到內容的，因為無法載入其中的內容，所以必須使用伺服器來開啟網頁，這裡以express伺服器為例檢視 1.全域性安裝express gener...

vue專案打包問題

1.設定不同的介面位址 先找到以下檔案 config dev.env.js config prod.env.js 可以看到dev.env.js裡面內容如下 這是生產環境的引數配置,然後我們可以再上面檔案加入一行 如下 這就是本地測試環境請求後台介面的網域名稱 然後找到prod.env.js檔案,如下...