详解vue-cli 构建Vue项目遇到的坑


Posted in Javascript onAugust 30, 2017

前言

使用Vue做管理系统和WebApp做过三四个项目了,期间遇到很多坑,再次一一列举,并给出解决方案,方便日后更方便使用,也为他人提供一些解决方案。

问题表象和解决方案

1、编译后js、css等相对路径和绝对路径。

config/inde.js文件
 build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './', // "./"表示相对路径 编译结果 <link href=./static/css/app.518fd3471fd03bfce5524de6e934771c.css rel=stylesheet>
  productionSourceMap: true,
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 },

2、CSS中图片相对路径编译后,路径不对。

//同常路径表现为 ./static/img/static/img/*.jpg (定义为imgurl)
解决方案 修改build/untils.js
//替换相应代码
if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../', //注意: 此处根据路径, 自动更改 ,(imgurl='static/img/*.jpg')
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }

3、使用代理,解决跨域请求。

vue-cli已经集成 http-proxy-middleware插件

github:https://github.com/chimurai/http-proxy-middleware

proxyTable: {
   '/dianmi_service': {
    target: 'https://****.com.cn',
    changeOrigin: true
   },
   '/brand_service': {
    target: 'https://*****.com.cn',
    changeOrigin: true
   }
  },

其中 target的值一定不可以包含工程名,否则可能会出现服务器Session问题

4、用Vue做页面,利用phonegap编译android APP时,兼容问题。

cordova android 4.0 以下的默认webView,不支持ES6,会导致一些列问题。

好在,cordova android允许我们自定义自己的webView引擎。那么我们就想到了 腾讯浏览服务X5内核。

然而有大神基于此内核编写了cordova 插件

githup:https://github.com/offbye/cordova-plugin-x5engine-webview

使用此插件很好的解决 低版本安卓不支持Vue。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
前端开发不得不知的10个最佳ES6特性
Aug 30 #Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 #Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 #Javascript
详解使用nvm管理多版本node的方法
Aug 30 #Javascript
jquery插件开发之选项卡制作详解
Aug 30 #jQuery
浅谈angular.js跨域post解决方案
Aug 30 #Javascript
详解a++和++a的区别
Aug 30 #Javascript
You might like
php项目打包方法
2008/02/18 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
驱动事件的addEvent.js代码
2007/03/27 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
python 打印对象的所有属性值的方法
2016/09/11 Python
python版本的仿windows计划任务工具
2018/04/30 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
django 外键model的互相读取方法
2018/12/15 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
类的返射机制中的包及核心类
2016/09/12 面试题
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
军训自我鉴定
2014/01/22 职场文书
教师档案管理制度
2014/01/23 职场文书
给国外客户的邀请函
2014/01/30 职场文书
科技之星事迹材料
2014/06/02 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
2015年工会工作总结
2015/03/30 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
初中英语教学随笔
2015/08/15 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
python三子棋游戏
2022/05/04 Python