一般情況下，通過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‘);

也可以不改配置用數據的形式解決：

<div :style="bg"></div>


export default {
    data() {
        return {
            bg: {
                backgroundImage: "url(" + require("../../static/img/base/title.png") + ")",
                backgroundRepeat: "no-repeat"
            }
     }
 },
 

vue -- 打包資源正確引用及背景圖引入