<ul id="k8q20"></ul>

如何解決vue打包項目中的圖片,靜態css,js 不能訪問路徑問題

BenCHou 發布于2019-08-23 15:41 / 2815人閱讀

摘要：在書寫代碼的時候按照相對路徑引入但是默認打包的等資源的路徑是絕對的實際寫的代碼打包編譯后的路徑是這樣的打包編譯之后的路徑是絕對路徑當部署到帶有文件夾的項目中就會報錯，因為把配置的文件當成了根路徑解決辦法引入相對路徑打開執行打包命令，

1.在書寫代碼的時候按照相對路徑引入；

但是webpack+vue-cli 默認打包的css,js 等資源的路徑是絕對的；

實際寫的代碼

3.webpack 打包編譯后的路徑是這樣的；打包編譯之后的路徑是絕對路徑；當部署到帶有文件夾的項目中就會報錯，因為把配置的static 文件當成了根路徑；
解決辦法：引入相對路徑；
打開build/webpack.prod.conf.js

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath("js/[name].[chunkhash].js"),
    chunkFilename: utils.assetsPath("js/[id].[chunkhash].js"),
    publicPath: "./"
  },

4.執行打包命令，發現解決了css,js img圖片的路徑問題，但是沒有解決背景圖片的路徑問題，下面我們解決背景圖片的問題
修改build/utils.js

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: "vue-style-loader",
        publicPath: "../../"
      })
    } else {
      return ["vue-style-loader"].concat(loaders)
    }

再次執行打包命令，發現完美解決問題；
職場小白south Joe，望各位大神批評指正，祝大家學習愉快！

云服務器 GPU云服務器服務器中的項目路徑 java圖片路徑問題 cdn能不能加速服務器的靜態圖片移動端js圖片打包

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102441.html

如何解決vue打包項目中的圖片,靜態css,js 不能訪問路徑問題

摘要：在書寫代碼的時候按照相對路徑引入但是默認打包的等資源的路徑是絕對的實際寫的代碼打包編譯后的路徑是這樣的打包編譯之后的路徑是絕對路徑當部署到帶有文件夾的項目中就會報錯，因為把配置的文件當成了根路徑解決辦法引入相對路徑打開執行打包命令， 1.在書寫代碼的時候按照相對路徑引入；showImg(https://img-blog.csdnimg.cn/20190222095007168.jpg?...

wuaiqiu 2019-08-30 15:56 評論0 收藏0
實戰Vue簡易項目（2）定制開發環境

摘要：至于，為什么跟蹤文件因為這個功能是開發環境下獨有的，要修改開發環境吖，必然找開發環境的配置文件進行跟蹤。測試可行性重啟項目后，在瀏覽器中輸入是你本地，可通過查看能夠訪問，就說明局域網內的其他端可以訪問。然而，這樣并沒有結束。本章內容包含上一章思考的解決，還有一些其它的定制... CSS預處理關于對.vue文件模塊處理規則的配置依次可在build/webpack.base.conf....

woshicixide 2019-08-23 10:33 評論0 收藏0
vue開發看這篇文章就夠了

摘要：注意此處獲取的數據是更新后的數據，但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新，所以你現在可以執行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架庫和框架的區別我們所說的前端框架與庫的區別？ Library 庫，本質上是一...

fsmStudy 2019-08-21 18:37 評論0 收藏0
Vue-項目從本地搭建到線上部署（wǒ shì biaō tí dǎng）

摘要：放置在目錄下或通過絕對路徑被引用。對于相關來說，我們推薦使用而不是直接鏈式指定。在不更改配置文件的情況下，前端頁面迭代發布，不需要重啟服務。作者：gauseen 0. 關于 Vuejs 簡介：Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，易用、靈活、高效。生態系統項目介紹 awesome-vue Vue.js 相關很棒的...

Arno 2019-08-26 13:49 評論0 收藏0