vue-cli中理不清的assetsSubDirectory 和 assetsPublicPath

特立獨爬的蝸牛發表於2018-10-31
Vue

背景

一般情況下，我們借用 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裡面的內容複製出來，放在任何地方都可以用了（前提是資源要先上線哦）

相關文章