vue.js2.0开发中的几个技巧

时间:2024-11-20 14:34:44

最近用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文件了。

vue.js2.0开发中的几个技巧

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

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

vue.js2.0开发中的几个技巧

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

vue.js2.0开发中的几个技巧

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

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

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

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