vue-cli脚手架打包静态资源请求出错的原因是什么

　　介绍

这篇文章将为大家详细讲解有关vue-cli脚手架打包静态资源请求出错的原因是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>问题

<李>

vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题。

<李>

静态资源打包使用相对路径后css文件引入大图片路径错误问题

使用vue-cli2脚手架生成的默认打包配置文件,<代码> npm运行构建打包,部署项目到特定路径下://ip:港口/测试/index . html
此时访问://ip端口/测试/指数。html可以正常访问,但是引用的js和css等文件服务器响应为404,此时我们查看资源请求路径:

http://ip港口/静态/css/应用程序。(哈希). css 　　静态/js/http://ip应用程序。(散列)。js

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

http://ip港口/测试/静态/css/应用程序。(哈希). css 　　http://ip测试/静态/js/应用程序。(哈希). js

<强>原因

可以看出导致资源加载失败的原因是路径错误,我们可以移步看看指数。html文件,

& lt; ! DOCTYPE  html> 　　,& lt; html> 　　,& lt; head> 　　,& lt; title> project 　　,& lt; link  href=https://www.yisu.com/static/css/app.css rel=样式表> 　　头 　　<身体> 　　
　　<脚本类型=text/javascript src=/静态/js/app.js> 　　

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

<>强解决

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

构建:,{ 　　,…… 　　,//路径 　　,assetsRoot: path.resolve (__dirname, & # 39; . ./dist # 39;), 　　,assetsSubDirectory: & # 39;静态# 39; 　　,assetsPublicPath: & # 39;。/& # 39; 　　,…… 　　}

将assetsPublicPath: & # 39;/& # 39;更改为assetsPublicPath: & # 39;。/& # 39;,再进行打包,并将资源部署到特定路径下,然后访问,此索引时。html可以正常访问,同时js和css资源也可以正常加载访问了。

<强> css中引入资产目录下的图片资源出错

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

背景:,url(& # 39;静态/img/bg.png& # 39;);

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

http://ip港口/测试/静态/css/静态/img/bg.png

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

<>强解决方法一

将选项。提取设置为假

options.extract:,假的,

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

<强>解决方案二

设置ExtractTextPlugin插件中的publicPath
ExtractTextPlugin插件是为了将css从js文件中抽离出来,我们可以通过配置ExtractTextPlugin的静态资源路径参数来达到同样的效果,建立目录下的跑龙套。js文件,修改publicPath: & # 39; . ./. ./& # 39;;

//, Extract  CSS  when  that  option  is 指定//,(which  is 从而case  during  production 构建) 　　if  (! options.extract), { 　　,return  ExtractTextPlugin.extract ({ 　　,使用:装载机、 　　,回退:& # 39;vue-style-loader& # 39; 　　,publicPath: & # 39; . ./. ./& # 39; 　　,}) 　　},{else  　　,return  [& # 39; vue-style-loader& # 39;] .concat(加载器) 　　}

再次打包部署,发现此时的图片访问路径为& # 39;静态/img/. ./. ./bg.png& # 39;;

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

关于“vue-cli脚手架打包静态资源请求出错的原因是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

vue-cli脚手架打包静态资源请求出错的原因是什么