我就廢話不多說(shuō)了，大家還是直接看代碼吧~

// Paths assetsRoot: path.resolve(__dirname, ’../dist’), // 靜態(tài)資源輸出到二級(jí)目錄下 assetsSubDirectory: ’static’, // 靜態(tài)資源cdn地址 assetsPublicPath: ’/’,

引用的時(shí)候可直接，不用返回上一級(jí)去查找，因?yàn)榫幾g輸出后的 static 下的資源 跟 html 是在同一個(gè)目錄

<img src='http://www.gepszalag.com/bcjs/static/logo.png'></a>

如果單個(gè)vue文件里的 style 沒(méi)有用到 最好刪除掉 不然 html頁(yè)面會(huì)自動(dòng)生成一個(gè) 空的style

補(bǔ)充知識(shí)：webpack+vuecli打包生成資源相對(duì)引用路徑與背景圖片的正確引用

資源相對(duì)引用路徑

問(wèn)題描述

一般情況下，通過(guò)webpack+vuecli默認(rèn)打包的css、js等資源，路徑都是絕對(duì)的。

但當(dāng)部署到帶有文件夾的項(xiàng)目中，這種絕對(duì)路徑就會(huì)出現(xiàn)問(wèn)題，因?yàn)榘雅渲玫膕tatic文件夾當(dāng)成了根路徑，那么要解決這種問(wèn)題，就得引用相對(duì)路徑。

解決辦法

打開(kāi)webpack.prod.conf.js

找到output：增加 publicPath: ’./’, 即可，如圖。

那么這樣后，資源的引用路徑就正確了。

當(dāng)然在config文件夾下的index.js中修改 assetsPublicPath: ’./’同樣也可以達(dá)到資源的相對(duì)引用。

背景圖片的引用問(wèn)題

上面雖然解決了資源路徑的引用問(wèn)題，但是資源里面的背景圖片，不像index.html中加載資源一樣，通過(guò)./static/js/app.js引用可以正常加載，圖片資源是通過(guò)css加載的，如 background: url('../../assets/images/logo-index.png') no-repeat;被相對(duì)打包后變成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我們要保留css引用圖片的正常路徑，即：

url(../../static/img/logo-index.2f00bf2.png) no-repeat

那么就需要修改build文件夾下的utils.js代碼，如圖所示：

添加如圖所示的一行代碼，這樣不論是字體還是圖片的引用問(wèn)題都能解決。

以上這篇淺談Vue static 靜態(tài)資源路徑 和 style問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。