1.前言
build之后 直接運行
html
文件,圖片加載不出來的問題
新舊版本用法區(qū)別
2. 先說目前主流的 vue.config.js版本的解決方法
vue.config.js
這個文件需要自己 在項目根目錄創(chuàng)建哦
公共資源路徑publicPath
需要設置下
下面的 生產(chǎn)環(huán)境 開啟壓縮 可以配置
const path = require("path");
module.exports = {
publicPath: './',
// 生產(chǎn)環(huán)境,開啟js\css壓縮
if (process.env.NODE_ENV === 'production') {
config.plugin('compressionPlugin').use(new CompressionPlugin({
test: /\.(js|css|less)$/, // 匹配文件名
threshold: 10240, // 對超過10k的數(shù)據(jù)壓縮
deleteOriginalAssets: false // 不刪除源文件
}))
}
}
npm run build之后
打開 dist目錄下的html
文件就可以顯示圖片了
public 根據(jù)環(huán)境配置
publicPath:process.env_NODE_ENV ==="production"? "/shop/" :"/服務器地址文件夾名"
使用方式
自帶的
public/index.html
<%= BASE_URL %>
和ejs
模板類似
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
3. 舊版改法
4. 圖片相關
js
,css
或者vue
文件中,使用相對路徑(必須以.開頭)引用一個靜態(tài)資源時,該資源會被webpack
處理
@
作為一個模塊請求解析,cli
中默認@
表示src
目錄的別名
4.1 如果URL
以 . 開頭會作為一個相對模塊請求來解析,并基于文件系統(tǒng)相對路徑
想要打包后的圖片顯示 一般需用 到
require
引用
// 方式一: es6 轉(zhuǎn)成base64位圖片使用
import es6Img1 from "./img/4.jpg"
// 方式二:
let es6Img2 = require("./img/5.jpg")
data 直接使用
es6Img3:require("./img/4.jpg"),
assert1:require("@/assets/1.jpg"),
assert2:require("../../assets/4.jpg"),
public 直接用
路徑切換成 自己的路徑就好
<img src="../../../public/5.jpg" alt="public用" />
4.2注意
如果
URL
是一個~
開頭,會作為一個模塊請求被解析,
甚至可以引用依賴包中的資源
<img width="200" src="~X-npm-package.jpg" />
4.3注意
如果
URL
是一個絕對路徑,它將會被保留不變
<img width="200" src="/assets/img/2.jpg" alt="直接使用" />
<img width="200" src="http://image.com.xx/img/2.jpg" " />
5. 上面牽扯到幾個文件夾
1.public
這個文件夾 不參與 打包,
webpack管不了
,類似于 之前腳手架當中的static
目錄下的文件會被直接復制到最終打包的目錄,類似于一些公共不變的東西 ,例如我之前項目中的電話條SDK
,一些音視頻,iconfont也行
結論 這個目錄放不會變的 文件
2. assets
這個目錄放可能會變動的文件
目錄中的文件會被webpack
處理解析為模塊,只支持相對路徑
的形式
因為這個可以變動 所以這里也可以分化出不同的子目錄
例如 assets/util 存放工具類的js的;
assets/api 存放業(yè)務接口