vue-cli中理不清的assetsSubDirectory 和 assetsPublicPath

背景

通常狀況下，咱們借用 vue-cli之力安裝好全部依賴後，咱們就能夠愉快的板磚了。可是也常常會遇到一寫問題，好比assetsSubDirectory 和 assetsPublicPath兩個兄弟有時候把我搞得死去活來的，下午恰好有點空，我就去好好修理了他倆一下子（實際上是被修理）。通過無數次的，config/index.js 裏面的 build配置，而後無數次的 npm run build ，鄙人得出瞭如下之間，若有異議，還請多多指教。

基本的意義

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
複製代碼

• index: 模板
• assetRoot: 打包後文件要存放的路徑
• assetsSubDirectory: 除了 index.html 以外的靜態資源要存放的路徑，
• assetsPublicPath: 表明打包後，index.html裏面引用資源的的相對地址

通過無數次修改配置 和 build後的 看法

index: path.resolve(__dirname, '../dist/index.html'),// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: './assets/',
assetsPublicPath: './hello/',

打包後爲
<script type="text/javascript" src="./hello/assets/js/manifest.js"></script>
<script type="text/javascript" src="./hello/assets/js/vendor.js"></script>
<script type="text/javascript" src="./hello/assets/js/app.js"></script>
複製代碼

以上的意義是

• assetsRoot : 在當前目錄的上一級 的 dist目錄下輸出資源文件
• assetsSubDirectory: 把全部的靜態資源打包到 dist下的 assets文件夾下
• assetsPublicPath :表明生成的index.html文件，裏面引入資源時，路徑前面要加上 ./hello/,也就是assetsPublicPath的值 ``

---

因而可知 ，咱們能夠直接 設置 assetsPublicPath爲絕對路徑，好比本身的線上路徑前綴， https://www.yourdomain.com/,則打包後的路徑，所有會加上這個 前綴，若是配置package.json的一些參數，就能夠放心的把本身html裏面的內容複製出來，放在任何地方均可以用了（前提是資源要先上線哦）