vue-cli脚手架打包静态资源请求出错的原因是什么
这篇文章将为大家详细讲解有关vue-cli脚手架打包静态资源请求出错的原因是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司一直通过网站建设和网站营销帮助企业获得更多客户资源。 以"深度挖掘，量身打造，注重实效"的一站式服务，以网站设计、成都网站建设、移动互联产品、成都全网营销服务为核心业务。10多年网站制作的经验，使用新网站建设技术，全新开发出的标准网站，不但价格便宜而且实用、灵活，特别适合中小公司网站制作。网站管理系统简单易用，维护方便，您可以完全操作网站资料，是中小公司快速网站建设的选择。
问题
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文件，
project
...
可以看出引入的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-cli脚手架打包静态资源请求出错的原因是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
网页标题：vue-cli脚手架打包静态资源请求出错的原因是什么
分享地址：http://cdkjz.cn/article/peghcs.html
