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 一样,我们使用相对路径就行了。


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


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

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

相关文章

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

你可能感兴趣的:(vue,webpack)