webpack-从零搭建vue过程

执行了npm init之后,会让我们填写一些配置信息，如果还不知道怎么填写的话可以一路回车，会生成一个pakeagejson文件,文件内容如下：

当使用 vue-loader 或 vueify 的时候，vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名：

在webpackconfigjs配置一下vue-loader

Vue-loader在15之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,所以在webpackconfigjs中加入

先安装html-webpack-plugin插件 npm install --save-dev html-webpack-plugin,然后配置webpackconfigjs

先安装webpack-dev-server；npm install webpack-dev-server --save-dev
然后在webpackconfigjs文件配置：

最后在packagejson文件配置一下运行webpack-dev-server的脚本

以vue cli 3配置为例，
"scripts":{
"dev":"vue-cli-serviceserve",
"serve":"vue-cli-serviceserve",
"build":"vue-cli-servicebuild",
"lint":"vue-cli-servicelint"
}
当执行npmrundev后
npm会去packagejson里边的scripts字段里找dev这个命令
如果配置了的话，就会执行对应的配置vue-cli-serviceserve
vue-cli-service也是一个命令，当npm的脚本执行的时候就会去执行当前项目目录下的node_modules/bin/vue-cli-servicecmd这个文件(可自行查看源码)
vue-cli-servicecmd这个文件又会用node执行@vue\cli-service\bin\vue-cli-servicejs文件(可自行查看源码)
vue-cli-servicejs这个文件里加载着(两层加载)对应的命令处理文件（@vue\cli-service\bin\commands\servejs文件写着可执行的命令）
然后你就会发现它加载了webpack-dev-server这个包（也就是说vue-cli-service是基于这个包实现的）(可自行查看源码)
然后再看webpack-dev-server这个包，它又是基于express实现的
express又是一个node框架，它起的web服务器底层调用的实际是node的>

既然是布署，哪默认就应该是生产环境下的布署，vue开发的应用本质上就是静态文件,无论你用何种web服务器，放上去就应该能通过>

接下来我来帮大家来捋一捋

首先VUE 是一个javascript的前端框架，注定了它是运行在浏览器里的，对服务器本地没有任何要求，只要一个静态文件服务器能通过>

npm run dev 是用来在本地开发的时候做调试用的，vue开发的是前端的东西，不是nodejs 服务端程序，按道理讲，生产环境里就不该存在npm，甚至nodejs也不需要（用nodejs来做web静态服务的除外），楼主通过ssh进入到服务器里，再运行npm run dev 来启动哪是开发机上做的事情。正确的做法很简单，通过npm run build 把生成的dist文件夹（不要上传文件夹）里的内容上传到>

一般如果vue框架的程序上传到网站服务器的根目录下是不 会有问题的，也不存在资源文件引用错误的情况，但如果你不是根目录，就会有问题，通过vue-cli 生成的开发目录，build以后默认引用资源文件的路径是

有更多疑问 ”可以咨询 ”小鸟云，它是的一家服务器厂商，我一直在用他们产品！

---