项目环境
- vue-cli脚手架+element-UI搭建(编译器:vscode)
vue init webpack 项目名称
,接着根据提示,按需构建项目环境(这里使用的vue2.X版本)
具体打包生成的步骤,网上有很多这方的构建素材,大家可自行搜索教程
踩坑一:webpack打包时的bug(打开的index.html是压缩后的代码,使用alt+shift+f格式化后看会比较明显)
1,运行npm run build 后将dist文件夹下的内容拷贝到本地的集成环境中,使用localhost访问,结果出现白屏
2,F12检查发现console报错,css、js等文件404bad
3,打开编译器,将dist文件夹下的index.html打开发现问题
可以很明显的发现link和script中的引用和type都没有引号
解决方法:
找到根目录下的build文件夹下的webpack.prod.conf.js文件,ctrl+f
搜索 minify
将minify 里的 removeAttributeQuotes属性改为false即可
你以为问题完了吗?
踩坑三:webpack打包后的路径问题
话不多说,直接上图
看似文件引入ok,实际还是会报404bad;原因在文件的引用:
当前目录下要么直接使用 文件夹名/…/…/等文件路径
要么使用 ./文件夹名/…/…/等文件路径
解决方法:
1,找到打开根目录下的config文件夹中的index.js文件
2, ctrl+f
搜索 assetsPublicPath,将此属性的“/” 改为“./”
完成以上操作,npm run build
后的文件拷贝到集成环境中,此时网页就可以访问了~~
踩坑四:背景图片引入问题
- img标签引入一般不会有问题,但通过css引入的背景图片或者js引入的就会出现路径问题
解决方法:
找到根目录下build文件中的utils.js文件,搜索 ExtractTextPlugin.extract
,并为其添加属性和值为 publicPath: '../../',
如下图
好了,关于vue-cli构建工具的生成环境打包问题就介绍到这里,有问题的同学可以留言讨论~
个人博客也刚刚打通www.blog.lilihaoo.top,欢迎来访~~~