详解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 相关文章推荐
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
前端开发不得不知的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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
php通过session防url攻击方法
2014/12/10 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
python框架flask表单实现详解
2019/11/04 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
采购主管的岗位职责
2013/12/17 职场文书
公益广告标语
2014/06/19 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
element多个表单校验的实现
2021/05/27 Javascript
python unittest单元测试的步骤分析
2021/08/02 Python