今天同学问了我有关 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 - inor 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 了
也补充学习了其他 webpack 相关知识:
publicPath
参考链接: http://blog.csdn.net/kcetry/article/details/53300331
参考链接: https://www.cnblogs.com/yueliangcl/p/6679427.html
webpack2loader 的新写法:
参考链接: http://www.css88.com/doc/webpack2/concepts/loaders/
修改后的项目地址: https://gitee.com/qiapi/vue-webpack.git
来源: http://www.jianshu.com/p/9b1006620c19