自动化工具构建vue项目

vue

其实之前对vue的话也有过一段时间的学习，博客园也是写了5篇vue的学习笔记。但是一直是通过CDN的方式在html文件头部引入vue.js，然后实例化vue对象绑定Dom，写组件写方法。就算是在实际项目中也是以这样的方式，没有通过自动化工具来构建vue项目的经验。

新公司的项目是基于vue开发的，用到前端自动化工具，虽说没做过此类项目，但是对于node、webpack这些，之前自己也是玩儿过的，所以上手的话也是很快的，在这里就先简要地记录一下node构建vue项目的步骤吧（包含遇到的坑）。

温馨提示：我用的是cmder，不是系统自带的cmd。

一、准备工作

开始的话，下载node（可能需要手动配node环境变量），然后在下载的node根文件夹下通过npm安装webpack、vue-cli（vue脚手架工具），为求方便，这两个最好全局安装（-g）；

二、构建vue项目

假设你已经完成了如上步骤，那么接下来，还是在node根目录下，一条命令创建vue项目：

上述n个问题，直接略过，直接回车，然后你的node根目录下回多出一个vue-pro（你自己起的项目名）文件夹，并且会自动下载项目依赖包。

三、项目跑起来

下完依赖之后，我们cd命令到项目文件夹下，并且启动项目：

然后通过webpack的编译，你就可以在浏览器访问你的项目了：

你也可以直接ctrl点击上述地址，直接访问项目，效果如下：

四、打包

写vue项目的时候，因为使用了自动化工具的缘故，文件看起来非常非常多，像下面这样：

涉及到很多的配置，看起来很让人头大，有组件、路由、入口文件、es6->es5、依赖包管理等等，但是，打包之后，就会出现熟悉的身影（这里有坑，先别急）：

打包完毕，项目目录下会多出一个名为dist（名字可以自己配置的，默认配置名为dist）的文件夹，打开之后你会发现：

static文件夹下，就是images、js、css等静态资源文件，此时你双击index.html

五、打包的路径问题

双击之后，你会发现浏览器一片空白，惊喜不惊喜？刺激不刺激？哈哈哈哈！！！

F12一看，一堆错误，404，那就大概知道了，是打包时候的路径出错了，于是我们找到项目下的一个配置文件看看：

其实，问题就是出在这里了，绝对路径的话，打包之后自然从绝对路径找了，文件在C盘他就从C盘对应目录找，所以自然是找不到的，所以这里应当将"/"改成"./"，这样就是相对于当前目录了，文件夹怎么移动都没事，依旧找得到！