Vue2项目架构搭建(九)—— 打包项目

vue开发的东西基础架构已经搭建完成,还有很多关联的插件,具体等以后用到再补充,最后就是项目打包。

打包代码

vue-cli已经配置好打包工具,只需要我们在当前项目下build就好,连续两次Ctrl + c 退出服务启动,执行

npm run bulid

下图显示完成打包和生成的文件目录:
Vue2项目架构搭建(九)—— 打包项目_第1张图片
打包完成后,项目目录会自动生成打包生成的dist文件夹,证明打包成功了。

检测打包代码

打包完成后会提示必须放在http server上才能运行,直接打开index.html不能工作,但是我们之前就已经有http server,而且打包的目录在当前项目下,只需把目录改到dist就行了。先跑服务:

npm run dev

修改浏览器链接,指向打包路径 http ://localhost:8080/dist/index.html,效果一模一样,直接把dist文件夹下内容扔到服务器就ok了。

本人才疏学浅,如果哪位小伙伴发现问题或者有更好的优化,希望能留言我好及时修改和优化,大家一起学习一起进步,免得被不合理或者错误的东西误导后续看到此博文的小伙伴。

你可能感兴趣的:(webpack,Vue)