vue打包 assetsPublicPath改變，static下文件訪問不到的問題

問題背景：
一、.smallTarget項目，使用vue官網腳手架，修改了/config/index.js文件，把默認打包後的文件夾名稱改成了“smallTarget”，這時候npm run build 打包部署，就可以訪問到以smallTarget爲根目錄的頁面。（相當於只修改了文件夾的名稱而已）

 index: path.resolve(__dirname, '../smallTarget/index.html'),
 assetsRoot: path.resolve(__dirname, '../smallTarget'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',

二、但是我的需求是，想以smallTarget的上一級爲跟目錄，訪問smallTarget裏面的文件，當我修改了/config/index.js文件裏面的assetsPublicPath: './'之後，npm run build 打包部署之後，會發現訪問不到static下的靜態文件。

 index: path.resolve(__dirname, '../smallTarget/index.html'),
 assetsRoot: path.resolve(__dirname, '../smallTarget'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './',

部署後，查看網絡請求，發現：
（不過開發環境是正常的）
1.原本應該請求：
http://www.xxx.com/smallTarget/static/lottieData/animationData1/data.json
2.實際的網絡請求:
http://www.xxx.com/static/lottieData/animationData1/data.json

三、解決方法：
1.修改了/config/index.js文件assetsSubDirectory: ‘./static’

index: path.resolve(__dirname, '../smallTarget/index.html'),
assetsRoot: path.resolve(__dirname, '../smallTarget'),
assetsSubDirectory: './static',
assetsPublicPath: './',

2.修改build/utils.js 中，增加一個 pablicPath 的配置，

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'   // 作用是設置打包過程中提取css的方法
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

(1).template 中 img 標籤中 src
這種情況與 style 標籤中 background-image 一樣，我們使用相對路徑就行了。

<img src="../../../static/image/logo.jpg" >

(2).【唯一需要值得注意的是，template 中 img 標籤中 v-bind:src 將不適用這個規則】
template 中 img 標籤中 v-bind:src，路徑使用（./static)訪問靜態文件。

<img :src="imageUrl">

data () {
    return {
    	imageUrl: './static/image/logo.jpg'
    }
  }

直接使用 src 和 v-bind:src 還是有區別的。引入其他文件靜態文件也是一樣的

相關文章

• https://blog.csdn.net/csdn_yudong/article/details/84936130