脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-cli脚手架打包静态资源请求出错

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

 更新时间：2019年06月06日 11:38:13   作者：筱筱酱  
这篇文章主要给大家介绍了关于vue-cli脚手架打包静态资源请求出错的原因与解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-cli具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

问题

  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大型应用的10个最佳实践(小结)

    构建Vue大型应用的10个最佳实践(小结)

    这篇文章主要介绍了构建Vue大型应用的10个最佳实践(小结),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue组件间的双向绑定示例解析

    Vue组件间的双向绑定示例解析

    这篇文章主要介绍了Vue组件间的双向绑定，我们都知道当父组件改变了某个值后，如果这个值传给了子组件，那么子组件也会自动跟着改变，但是这是单向的，使用v-bind的方式，即子组件可以使用父组件的值，但是不能改变这个值
    2023-03-03
  • vue项目打包以及优化的实现步骤

    vue项目打包以及优化的实现步骤

    项目完成，我们会将项目进行上线，为了提升性能，我们往往会进行一些优化处理，本文主要介绍了vue项目打包以及优化的实现步骤，感兴趣的可以了解一下
    2021-07-07
  • Vue-cli 如何将px转化为rem适配移动端

    Vue-cli 如何将px转化为rem适配移动端

    这篇文章主要介绍了Vue-cli 如何将px转化为rem适配移动端,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-07-07
  • atom-design(Vue.js移动端组件库)手势组件使用教程

    atom-design(Vue.js移动端组件库)手势组件使用教程

    这篇文章主要介绍了atom-design(Vue.js移动端组件库)手势组件使用教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-05-05
  • webpack如何打包一个按需引入的vue组件库

    webpack如何打包一个按需引入的vue组件库

    在vue项目开发中,我们会将经常用到的逻辑或模块抽象成组件,对于那些多个项目都有用到的组件,可以考虑封装成组件库,这篇文章主要给大家介绍了关于webpack如何打包一个按需引入的vue组件库的相关资料,需要的朋友可以参考下
    2022-02-02
  • vue ui的安装步骤以及使用详解

    vue ui的安装步骤以及使用详解

    最近公司开发一个项目,采用的前后端分离的方式,前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,下面这篇文章主要给大家介绍了关于vue ui的安装步骤以及使用的相关资料,需要的朋友可以参考下
    2022-08-08
  • Vue通过ref父子组件拿值方法

    Vue通过ref父子组件拿值方法

    今天小编就为大家分享一篇Vue通过ref父子组件拿值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解vue数组遍历方法forEach和map的原理解析和实际应用

    详解vue数组遍历方法forEach和map的原理解析和实际应用

    这篇文章主要介绍了详解vue数组遍历方法forEach和map的原理解析和实际应用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue微信分享的实现(在当前页面分享其他页面)

    vue微信分享的实现(在当前页面分享其他页面)

    这篇文章主要介绍了vue微信分享，在当前页面分享其他页面，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04

最新评论