当前位置：主页 > vue.js教程 >

分析vue-cli脚手架打包静态资源请求出错的原因与解决方法

  • 更新时间：2020-04-10 22:33:32
  • 编辑：权雅惠

问题

  1. vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题。
  2. 静态资源打包使用相对路径后css文件引入大图片路径错误问题

使用vue-cli2脚手架生成的默认打包配置文件，npm run build打包，部署项目到特定路径下：//ip:port/test/index.html
此时访问//ip:port/test/index.html可以正常访问，但是引用的js和css等文件服务器响应为404，此时我们查看资源请求路径：

http://ip:port/static/css/app.[hash].css
http://ip:port/static/js/app.[hash].js

可以看出，上面的静态资源访问路径是不正确的，我们正确的请求路径应该是

http://ip:port/test/static/css/app.[hash].css
http://ip:port/test/static/js/app.[hash].js

原因

可以看出导致资源加载失败的原因是路径错误，我们可以移步看看index.html文件，

<!DOCTYPE html>
 <html>
 <head>
 <title>project</title>
 <link href=/static/css/app.css rel=stylesheet>
 </head>
 <body>
 <div id=app></div>
 <script type=text/javascript src=/static/js/app.js>
 </script>
 ...
 </body>
 </html>

可以看出引入的css和js都是使用的绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路径无法被正确解析。

解决

在webpack打包时，使用相对路径来处理静态资源，修改build中资源发布路径配置(build/config.js);

build: {
 ...
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './',
 ...
}

将assetsPublicPath: '/'，更改为assetsPublicPath: './'，再进行打包，并将资源部署到特定路径下，然后访问，此时index.html可以正常访问，同时js和css资源也可以正常加载访问了。

css中引入assets目录下的图片资源出错

我们经常这样引用一个img图片

background: url('static/img/bg.png');

但是打包后看到这个图片的引用地址是这样的。

http://ip:port/test/static/css/static/img/bg.png

可以看出css中图片的路径存在问题了，分析打包过程，css是在js中引入的或是写在vue文件中的，css文件首先被less，postcss等处理，处理后会被ExtractTextPlugin处理，ExtractTextPlugin将js中的css全部抽离至app.css文件中。

解决方法一

将options.extract设置为false

options.extract: false,

关闭抽离css功能，再次打包并部署，此时你会发现没有css文件了，css文件全部在app.js文件中，通过js将css注入到index.html文件中，此时图片的访问路径是相当index.html文件的，所以可以正常访问

解决方案二

设置ExtractTextPlugin插件中的publicPath
ExtractTextPlugin插件是为了将css从js文件中抽离出来，我们可以通过配置ExtractTextPlugin的静态资源路径参数来达到同样的效果，build目录下的utils.js文件，修改publicPath: '../../';

// 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: '../../'
 })
} else {
 return ['vue-style-loader'].concat(loaders)
}

再次打包部署，发现此时的图片访问路径为'../../static/img/bg.png';

publicPath 属性值为打包后的 app.css文件至index.html文件的相对路径

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对码农之家的支持。

相关教程

  • vue.js的vue-cli脚手架使用百度地图API的代码

    今天小编就为大家分享一篇关于vue.js的vue-cli脚手架中使用百度地图API的实例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧

    发布时间：2020-01-07

  • vue-cli 脚手架 安装方法

    这篇文章主要介绍了vue-cli脚手架安装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

    发布时间：2020-02-02

  • 解析Vue2.0基于vue-cli+webpack Vuex的用法

    下面小编就为大家带来一篇Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-02-11

  • vue-cli开发时ajax跨域的方法

    下面小编就为大家分享一篇vue-cli开发时,关于ajax跨域的解决方法(推荐)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

    发布时间：2019-11-18

  • Spring Boot+Vue全栈开发实战

    Spring Boot+Vue全栈开发实战

    传统的JavaEE开发效率低下、配置臃肿、调试不便，严重制约了程序员的生产力。Spring Boot致力于简化开发配置，并为企业级开发提供一系列非业务性功能；而Vue则采用数据驱动视图的方式将程序

    大小：196.3 MBSpring电子书

  • JavaScript+Vue+React全程实例

    JavaScript+Vue+React全程实例

    这书根据基础知识与开发实践活动紧密结合的观念，选萃当今简易、好用和时兴的百余个JavaScript编码案例，协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂，包含了JavaScript前端开发开发的各个方面。

    大小：59150 MB MJS实例

  • Vue企业开发实战

    Vue企业开发实战

    本书以Vue.js 2为基础，以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。

    大小：109.6 MBVue.js实战电子书

  • Vue.js快速入门

    Vue.js快速入门

    目前单页应用框架层出不穷，其中Vue.js是十分耀眼的项目之一，受到国内外开发人员的极度推崇。

    大小：186.6 MBWeb前端电子书

  • Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统

    Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统

    本书从项目实践出发，手把手、心贴心地带领读者从零开始，一步一步地开发出功能相对完整的权限管理系统，从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇，对系统的功能、架构和界面进行介绍，对系统的安装运行给出指南，对涉及的关键技术进行简单介绍。第二篇为后端实现篇，从数据库设计和搭建开发环境开始，全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现

    大小：132979 MB 项目实战

  • 前端工程师必备技能：Vue移动开发实战技巧

    前端工程师必备技能：Vue移动开发实战技巧

    Vue.js是一个渐进式的JavaScript 框架，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。作为201

    大小：122 MBVue实战电子书

  • 水晶石技法VUE 10完全学习手册

    水晶石技法VUE 10完全学习手册

    《水晶石技法 VUE 10完全学习手册》共14章，以实例为主，共提供了50多个制作实例。第1～3章对VUE进行了总体介绍。第4～12章通过大量的实例，分别介绍了VUE的各个功能模块，包括大气、材质、地形、生态系统、函数、动画、渲染，以及VUE和其他软件的结合使用(比如，3ds Max、Poser等)。第13章安排了两个综合实例，让读者在较为全面地了解了VUE的功能之后，综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中，列出了VUE使用过程中的一些常见

    大小：114191 MB VUE10学习手册

  • Vue.js快速入门

    Vue.js快速入门

    目前单页应用框架层出不穷，其中Vue.js是十分耀眼的项目之一，受到国内外开发人员的极度推崇。 全书分为8章，内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等，最后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员，也适合高等院校和培训学校的师生教学参考。

    大小：26581 MB MVue.js入门

  • Vue.js前端开发：快速入门与专业应用

    Vue.js前端开发：快速入门与专业应用

    本书分为10章，包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法，到工程实例，将系统地讲述Vue.js在项目中的

    大小：3.6KB MB前端开发电子书

  • Vue.js实战

    Vue.js实战

    尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅

    大小：196.7 MBVue电子书

用户留言

发布评论

最新更新

热门推荐