vue和webpack构建项目的一点补充

作者: 恰皮 | 来源:发表于2018-02-09 00:42 被阅读0次

今天同学问了我有关 vue 和 webpack 构建项目的过程，发现自己果然还是有很多缺乏的知识点，尤其是 webpack 的一些配置，之前只知道怎么用 vue-cli 一键构建项目，就对 webpack 这些半知半解也没有去学习，光看文档也很难理解它的用处。但是在自己的持续毅力 debug，终于解决问题并且补了一顿 webpack 和 vue 的知识。趁着还记得赶紧搬小板凳记笔记，防止以后忘记了。

同学的原项目地址：https://gitee.com/qiapi/testrh.git
项目无法正常运行起来。
目的：不使用vue-cli，使用vue单文件组件构建项目，vue单文件组件需要配合webpack打包。
原项目结构：
app -----
- main.js //入口文件
- nav.vue //vue单文件组件
- test.js //一个纯粹测试用的文件
public ----
- index.html
package.json
webpack.config.js

理论上 main.js 中正确引入组件，webpack 正确配置就可以正常运行起来。
npm start 的时候 webpack 会根据配置文件的入口文件找到 main.js，打包相关依赖。打包 main.js 的时候根据 new Vue 中的 el 属性找到index.html中的挂载点，将 template 的内容挂载到该元素，components 属性引入相关组件。

npm install

直接 npm start 运行该项目，会发现缺少 webpack 和 webpack-dev-server 等相关依赖包，可以修改 package.json，然后直接 npm install
可以安装好相关依赖包。
image.png
浏览器控制台会报上述错误，尝试修改为“./nav.vue”，原因是他没有忽略后缀去匹配。也可以在 webpack 中配置（参考链接：https://segmentfault.com/q/1010000004707962/a-1020000004710230）

reslove: {
    extensions: ['', '.js', '.json', '.vue', '.scss', '.css']
}

修改后就会发现webpack报错无法解析vue单文件组件中的template模板，提示安装vue-template-compiler，同时安装依赖包vue和vue-template-compiler后此问题解决。
在 main.js 中引入 import Vue from 'vue' 这是 main.js 文件中必须引入的。
image.png
添加根目录的 index.html 文件，仍然提示找不到 #app 的元素，怀疑
main.js 根本找不到 index.html，思考了 webpack 如何去 index.html 里面找到 app 元素的，应该在配置文件中有所体现，不然 webpack 不知道去哪里找 index.html，对比了使用 vue-cli 的 webpack配置文件，搜索定位
index 所在，发现了 HtmlWebpackPlugin 插件中存在，百度了这个插件的作用，就是用来确定这个 index.html 的。
参考链接：https://segmentfault.com/a/1190000007294861
参考链接：https://segmentfault.com/a/1190000008590102
修改webpack配置文件HtmlWebpackPlugin的配置，浏览器控制台出现：[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in <Root>)
页面依旧空白，怀疑是其影响，百度出现这个 warning 的原因。在
webpack 配置文件中加入 resolve: { alias: { 'vue': 'vue/dist/vue.js' } } 配置别名，warning 问题解决。页面无任何warning
image.png
参考链接：http://blog.csdn.net/fengjingyu168/article/details/72911421
参考链接：https://www.imooc.com/article/17868
页面依旧空白，查看控制台无任何报错和warning，审核元素页面有app元素却没有渲染组件，main.js文件有引入也没有渲染nav组件。此处webpack应该
没有问题，回到main.js 和nav.vue寻找问题。

image.png
检查main.js修改new Vue中component的语法错误为components,浏览器控制台报warning：[Vue warn]: Do not use built-in or reserved HTML elements as component id: nav
百度warning的原因是存在同名组件？怀疑问题在组件名上面，修改组件名为大写Nav,页面的warning解决。
参考链接：http://blog.csdn.net/qq_34645412/article/details/78846782
image.png
页面依旧空白，检查main.js，加入template:"<Nav/>",页面正常显示了Nav组件。但是控制台waring重新出现
image.png
9.修改nav.vue中的name为navigator,同时修改main.js中引用的组件名，页面无warning了。