zoukankan      html  css  js  c++  java
  • vue.js2.0开发中的几个技巧

    最近用Vue.js开发了几个项目,Vue的双向数据绑定和组件化让我耳目一新,减少了很多底层重复的工作,和基于jQuey的前端开发不起来,基于Vue的开发给我一种酣畅淋漓的感觉。

           下面给出我基于Vue.js做的几个页面:爆料页面520贵州百姓关注抢红包

           当然,在开发的过程中,不可避免的遇到了一些问题和坑,在此记录这些问题,积累经验。

    1.测试环境相对路径的问题

           Vue.js 2.0可以基于wepack构建,如果需要打包生成最终输出代码,直接在DOS窗口中输入命令:npm run build,就可以了。 但是当我把代码部署到测试环境上后,却发现css、js文件资源找不到,经过查找后发现输出文件夹“/dist”中index.html中引用的css、js文件相对路径不对,然后我在网上查找资源,找到了解决办法,将build文件夹中webpack.base.conf.js文件中第17行代码改成如下图所示即可,意思也比较好理解,就是webpack在打包的时候,公共的相对路径是'../',这样就能正确的找到css和js文件了。

    2.本地调试如何解决跨域的问题

          web前端开发中不可避免的要遇到跨域的问题,特别是当我们在本地调试页面,而服务端api接口在测试环境上时,解决跨域的问题,要么使用jsonp,要么只能把代码部署到测试环境后才能调试,每改动一次代码,都需要部署到服务器,这无疑效率很低,但是vue.js使用proxyTable很好的解决了这个问题,实际使用时,只需要把config目录下的index.js中第30行代码改成如下:

          然后还需要在http请求的url路径前面添加"/api",如下图:

    3.生产环境代码不生成map文件

          使用webpack构建的Vue工程在执行npm run build时默认会生成.map文件,.map文件只在调试阶段需要使用,生成环境已经不需要这类文件,那么,怎样才能不生成.map文件呢?同样,也是只需要配置webpack,修改config路径下index.js文件, 把productionSourceMap的值改为false即可。

     4.开发环境报“vue 不是内部或外部命令”的问题 

          前段时间在开发一个项目时,开发环境出问题了,一直报"vue不是内部或外部命令",在网上查找解决办法,大部分人都说是环境变量设置错了,但是我按照他们提供的方法改完后,依然还是报错,后来在折腾了1天半后,我决定重新安装vue,然后就可以正常使用了。

  • 相关阅读:
    派遣函数
    英文论文(1)
    状态机和时序图的“前世姻缘”
    线程安全性:原子性,安全性,加锁机制
    多线程程序中操作的原子性
    win10下安装Centos7总笔记!
    分支限界法---旅行售货员问题
    PHP+ajax聊天室源码!支持长轮循跟定时请求两种
    elasticsearch配置优化
    hbase region与内存的关系
  • 原文地址:https://www.cnblogs.com/snowhite/p/7248748.html
Copyright © 2011-2022 走看看