vue-cli打包生产环境--配置问题解决
2019-04-19 14:46
323 查看
项目环境
- 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,欢迎来访~~~
相关文章推荐
- 解决Vue-cli npm run build生产环境打包,本地不能打开的问题
- Electron-vue环境配置,打包报错问题解决
- 详解vue-cli开发环境跨域问题解决方案
- Vue---vue-cli 中的proxyTable解决开发环境中的跨域问题
- Vue-cli proxyTable 解决开发环境的跨域问题(转)
- 记录vue-cli 3.x 配置代理解决axios跨域问题
- 详解vue项目和普通项目如何解决开发环境与生产环境下的跨域问题
- vue-cli2打包前和打包后的css前缀不一致的问题解决
- Cocos3d3.10版本配置打包环境要注意的问题和打包失败常见问题的解决办法
- 转:Vue-cli proxyTable 解决开发环境的跨域问题
- Vue-cli proxyTable 解决开发环境的跨域问题
- VUE 中配置生产环境和发布环境配置不同的接口地址 (运行npm run dev的时候,运行的是测试接口。npm run build打包项目的时候,打包的是服务器正式接口)
- Vue-cli中的proxyTable解决开发环境的跨域问题
- 在Mac中使用vue-cli搭建的vue框架,下载到win7环境中,配置应该注意的问题
- 使用SlowCheetah扩展插件解决测试环境和生产环境的配置问题
- Vue-cli proxyTable 解决开发环境的跨域问题
- Vue-cli proxyTable 解决开发环境的跨域问题
- vue项目中,Iview打包到生产环境时, woff 字体引用问题
- 关于vue-cli取消dev-server.js后, proxyTable代理配置问题解决
- vue-cli webpack模板项目搭建及打包时路径问题的解决方法