vue-cli打包生产环境--配置问题解决

项目环境

• 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，欢迎来访~~~