vue 配置文件不打包,vue项目打包成静态资源

　　本文主要介绍vue打包的静态文件无法直接运行的原因以及解决方法，帮助大家更好的理解和学习Vue框架。感兴趣的朋友可以了解一下。

　　问题

　　我们这一代用的是vue-cli直接生成的vue模板项目，在模板之上继续开发。但是在用npm run build打包项目的时候，我发现打包的项目直接在浏览器里打开了，好像什么都没有？

　　原因

　　看着打包的index.html源代码，我终于发现了重要的一点：

　　所有对路径的引用都以/开头

　　下面是我们打包生成的dist目录。

　　距离：

　　index.html

　　static

　　css

　　app . b 7 BCE 283257 FBD 427 FB 1 DC 3 FEA 80 ce 1 . CSS

　　app . b 7 BCE 283257 FBD 427 FB 1 DC 3 FEA 80 ce 1 . CSS . map

　　fonts

　　material icons-regular . 012 cf6a . woff

　　material icons-regular . 570 EB 83 . woff 2

　　material icons-regular . a 37 b0c 0 . TTF

　　material icons-regular . e 79 bfd 8 . eot

　　js

　　app.58cce746b2fe4ac2f2b9.js

　　app . 58 CCE 746 b 2 Fe 4 AC 2 F2 b 9 . js . map

　　manifest . 2 AE 2e 69 a 05 c 33 DFC 65 f 8 . js

　　manifest . 2 AE 2e 69 a 05 c 33 DFC 65 f 8 . js . map

　　vendor.a32972498ed8de656202.js

　　vendor . a 32972498 ed8de 656202 . js . map

　　这是很清楚的。默认情况下，vue-cli生成的模板项目的打包文件需要放在静态资源服务器上，而且还必须是根目录！这很不好，非常不好，所以配置需要修改。

　　解决方案

　　修改file _/config/index.js_以将build.assetsPublicPath属性的值从/更改为。/

　　修改文件_/build/utils.js_并添加publicPath:./.插件ExtractTextPlugin中的“/”。

　　然后，应该直接打开用npm run build重新打包的静态文件。

　　以上是vue打包的静态文件不能直接运行的原因和解决方法的详细说明。更多关于Vue打包的静态文件的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。