今天同学问了我有关 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
可以安装好相关依赖包。
浏览器控制台会报上述错误,尝试修改为“./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 文件中必须引入的。
- 添加根目录的 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
参考链接:http://blog.csdn.net/fengjingyu168/article/details/72911421
参考链接:https://www.imooc.com/article/17868 -
页面依旧空白,查看控制台无任何报错和warning,审核元素页面有app元素却没有渲染组件,main.js文件有引入也没有渲染nav组件。此处webpack应该
没有问题,回到main.js 和nav.vue寻找问题。
- 检查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
- 页面依旧空白,检查main.js,加入
template:"<Nav/>"
,页面正常显示了Nav组件。但是控制台waring重新出现
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/