美文网首页
VUE打包图片等不能正常加载的问题

VUE打包图片等不能正常加载的问题

作者: 猿分让我们相遇 | 来源:发表于2019-05-27 16:44 被阅读0次

    vue项目打包后在production模式下提示图片 ‘404(not found),在dev环境下好好的,打包了就提示这个错误。这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 ‘config/index.js'文件中的 build模块:

    // emplate for index.html
     index: path.resolve(__dirname, '../dist/index.html'),
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
     assetsPublicPath: './',
    

    将默认的改为上文这样子,静态文件目录改为static,静态路径改为‘./',即相对路径。 ok了?
    试了一下还是有404,当时想到的就是难道只能在组件data中以“require”的方式一个一个的引入了吗? 这个属于js中以模块引入方式确实可行,但是太繁琐,想一下,使用这张图的时候在html文档结构中以 “:bind”的方式将资源以code的方式加在html文档中,不是说这样不行,这样也是可以实现想要的效果的,但是这样做会导致不仅文档结构不清晰,冗余度高,维护起来麻烦,而且资源很多的时候这是一项庞大且繁琐的工作,徒增加无用功。
    这样第三种方法应用而生,就是修改‘build'目录下的utils.js文件,将文件中的“generateLoaders”函数改为:

    pluginfunction generateLoaders (loader, loaderOptions) {
      const loaders = options.usePostCSS ?
       [cssLoader,   postcssLoader] : [cssLoader]
      if (loader) {
       loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
         sourceMap: options.sourceMap
        })
       })
      }
      // Extract CSS when that option is specified
      // (which is the case during production build)
      if (options.extract) {
       return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'         //add
       })
      } else {
       return ['vue-style-loader'].concat(loaders)
      }
     }
    

    重点是if…else判断中的那个”publicPath:'../../' ”
    build一下,部署在服务端,ok可行,这样就可以愉快的在style中使用图片资源了。

    相关文章

      网友评论

          本文标题:VUE打包图片等不能正常加载的问题

          本文链接:https://www.haomeiwen.com/subject/hlohtctx.html