vue-cli脚手架打包静态资源请求出错的原因与解决
问题
- vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题。
- 静态资源打包使用相对路径后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文件的相对路径
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了前端Vue2、Vue3和不同版本nuxt的插槽使用的相关资料,Vue2和Vue3中,插槽机制允许在组件模板中定义占位符,并在使用组件时插入自定义内容,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-02-02
vuejs router history 配置到iis的方法
今天小编就为大家分享一篇vuejs router history 配置到iis的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue-element的select下拉框赋值实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
创建Vue3项目有两种常见的方式,一种是想vue2版本一样使用脚手架工具创建,创建vue3项目的脚手架必须是4版本以上的,另一种方法就是使用vite创建,这篇文章主要给大家介绍了关于如何使用vite创建vue3项目的相关资料,需要的朋友可以参考下2022-11-11
本文主要介绍了Element el-upload上传组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要为大家介绍了详解Vue虚拟DOM如何提高前端开发效率,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
tdesign-vue是TDesign 适配桌面端的组件库，适合在 vue 2 技术栈项目中使用，这篇文章主要介绍了vue项目中使用TDesign ,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了详解Element-UI中上传的文件前端处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,下面这篇文章主要给大家介绍了关于vue3组合式api实现v-lazy图片懒加载的相关资料,需要的朋友可以参考下2022-09-09
在Vue3中,导航守卫（Navigation Guards）用于在路由切换前后执行一些操作,例如验证用户权限、取消路由导航等,本文主要为大家介绍了vue3中导航守卫的使用方法,需要的可以参考下2023-08-08
最新评论