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，然后就可以正常使用了。