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: '/',

    
    

    
    
1
2
3
4

二、但是我的需求是，想以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
2
3
4

部署后，查看网络请求，发现：
（不过开发环境是正常的）
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: './',

    
    

    
    
1
2
3
4

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
2
3
4
5
6
7
8
9

(1).template 中 img 标签中 src
这种情况与 style 标签中 background-image 一样，我们使用相对路径就行了。

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

    
    

    
    
1

(2).【唯一需要值得注意的是，template 中 img 标签中 v-bind:src 将不适用这个规则】
template 中 img 标签中 v-bind:src，路径使用（./static)访问静态文件。

<img :src="imageUrl">

    
    

    
    
1

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

    
    

    
    
1
2
3
4
5

直接使用 src 和 v-bind:src 还是有区别的。引入其他文件静态文件也是一样的

相关文章

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