vue-cli脚⼿架打包静态资源请求出错的原因与解决问题1. vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题。2. 静态资源打包使⽤相对路径后css⽂件引⼊⼤图⽚路径错误问题使⽤vue-cli2脚⼿架⽣成的默认打包配置⽂件，npm run build打包，部署项⽬到特定路径下：//ip:port/test/此时访问//ip:port/test/可以正常访问，但是引⽤的js和css等⽂件服务器响应为404，此时我们查看资源请求路径：ip:port/static/css/app.[hash].cssip:port/static/js/app.[hash].js可以看出，上⾯的静态资源访问路径是不正确的，我们正确的请求路径应该是ip:port/test/static/css/app.[hash].cssip:port/test/static/js/app.[hash].js原因可以看出导致资源加载失败的原因是路径错误，我们可以移步看看⽂件，
project ... 可以看出引⼊的css和js都是使⽤的绝对根⽬录路径，因此将项⽬部署到特定⽬录下，其引⼊的资源路径⽆法被正确解析。解决在webpack打包时，使⽤相对路径来处理静态资源，修改build中资源发布路径配置(build/);build: { ... // Paths assetsRoot: e(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', ...}将assetsPublicPath: '/'，更改为assetsPublicPath: './'，再进⾏打包，并将资源部署到特定路径下，然后访问，此时可以正常访问，同时js和css资源也可以正常加载访问了。css中引⼊assets⽬录下的图⽚资源出错我们经常这样引⽤⼀个img图⽚background: url('static/img/');但是打包后看到这个图⽚的引⽤地址是这样的。ip:port/test/static/css/static/img/可以看出css中图⽚的路径存在问题了，分析打包过程，css是在js中引⼊的或是写在vue⽂件中的，css⽂件⾸先被less，postcss等处理，处理后会被ExtractTextPlugin处理，ExtractTextPlugin将js中的css全部抽离⾄⽂件中。解决⽅法⼀将t设置为t: false,关闭抽离css功能，再次打包并部署，此时你会发现没有css⽂件了，css⽂件全部在⽂件中，通过js将css注⼊到⽂件中，此时图⽚的访问路径是相当⽂件的，所以可以正常访问解决⽅案⼆设置ExtractTextPlugin插件中的publicPathExtractTextPlugin插件是为了将css从js⽂件中抽离出来，我们可以通过配置ExtractTextPlugin的静态资源路径参数来达到同样的效果，build⽬录下的⽂件，修改publicPath: '../../';// Extract CSS when that option is specified// (which is the case during production build)if (!t) { return t({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' })} else { return ['vue-style-loader'].concat(loaders)}再次打包部署，发现此时的图⽚访问路径为'../../static/img/';publicPath 属性值为打包后的 ⽂件⾄⽂件的相对路径总结以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，谢谢⼤家对的⽀持。
2023年6月21日发(作者：)
vue-cli脚⼿架打包静态资源请求出错的原因与解决问题1. vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题。2. 静态资源打包使⽤相对路径后css⽂件引⼊⼤图⽚路径错误问题使⽤vue-cli2脚⼿架⽣成的默认打包配置⽂件，npm run build打包，部署项⽬到特定路径下：//ip:port/test/此时访问//ip:port/test/可以正常访问，但是引⽤的js和css等⽂件服务器响应为404，此时我们查看资源请求路径：ip:port/static/css/app.[hash].cssip:port/static/js/app.[hash].js可以看出，上⾯的静态资源访问路径是不正确的，我们正确的请求路径应该是ip:port/test/static/css/app.[hash].cssip:port/test/static/js/app.[hash].js原因可以看出导致资源加载失败的原因是路径错误，我们可以移步看看⽂件，
project ... 可以看出引⼊的css和js都是使⽤的绝对根⽬录路径，因此将项⽬部署到特定⽬录下，其引⼊的资源路径⽆法被正确解析。解决在webpack打包时，使⽤相对路径来处理静态资源，修改build中资源发布路径配置(build/);build: { ... // Paths assetsRoot: e(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', ...}将assetsPublicPath: '/'，更改为assetsPublicPath: './'，再进⾏打包，并将资源部署到特定路径下，然后访问，此时可以正常访问，同时js和css资源也可以正常加载访问了。css中引⼊assets⽬录下的图⽚资源出错我们经常这样引⽤⼀个img图⽚background: url('static/img/');但是打包后看到这个图⽚的引⽤地址是这样的。ip:port/test/static/css/static/img/可以看出css中图⽚的路径存在问题了，分析打包过程，css是在js中引⼊的或是写在vue⽂件中的，css⽂件⾸先被less，postcss等处理，处理后会被ExtractTextPlugin处理，ExtractTextPlugin将js中的css全部抽离⾄⽂件中。解决⽅法⼀将t设置为t: false,关闭抽离css功能，再次打包并部署，此时你会发现没有css⽂件了，css⽂件全部在⽂件中，通过js将css注⼊到⽂件中，此时图⽚的访问路径是相当⽂件的，所以可以正常访问解决⽅案⼆设置ExtractTextPlugin插件中的publicPathExtractTextPlugin插件是为了将css从js⽂件中抽离出来，我们可以通过配置ExtractTextPlugin的静态资源路径参数来达到同样的效果，build⽬录下的⽂件，修改publicPath: '../../';// Extract CSS when that option is specified// (which is the case during production build)if (!t) { return t({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' })} else { return ['vue-style-loader'].concat(loaders)}再次打包部署，发现此时的图⽚访问路径为'../../static/img/';publicPath 属性值为打包后的 ⽂件⾄⽂件的相对路径总结以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，谢谢⼤家对的⽀持。
发布评论