vue -- 打包資源正確引用及背景圖引入
阿新 • • 發佈:2018-02-27
技術 itl 分享 div round ati 資源 export img 被相對打包後變成了
一般情況下,通過webpack+vuecli默認打包的css、js等資源,路徑都是絕對的。
但當部署到帶有文件夾的項目中,這種絕對路徑就會出現問題,因為把配置的static文件夾當成了根路徑,那麽要解決這種問題,就得引用相對路徑。
解決辦法
打開webpack.prod.conf.js
找到output
:增加 publicPath: ‘./‘,
即可,如圖:
也可在config
文件夾下的index.js
中修改 assetsPublicPath: ‘./‘
同樣也可以達到資源的相對引用。
背景圖引入問題
上面雖然解決了資源路徑的引用問題,但是資源裏面的背景圖片,不像index.html中加載資源一樣,通過./static/js/app.js引用可以正常加載,圖片資源是通過css加載的,如 background:url(‘../../static/img/base/title.png‘);
url(static/img/base/title.0cf9ae0.png)
所以我們要保留css引用圖片的正常路徑,就需要修改build
文件夾下的utils.js
代碼,如圖所示:
也可以不改配置用數據的形式解決:
<div :style="bg"></div> export default { data() { return { bg: { backgroundImage: "url(" + require("../../static/img/base/title.png") + ")", backgroundRepeat: "no-repeat" } } },
vue -- 打包資源正確引用及背景圖引入