vue使用npm run build命令打包项目

2018年9月9日13:49:44 发表评论 阅读(11,266)
本文最后更新于2018年9月12日,已超过一年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

当我们使用vue-cli脚手架完成一个项目的时候,下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢,我们在本地调试的时候只要命令行执行npm run dev就可以把这个项目跑起来,但是现在我们要把他放到服务器上的话用npm run build命令就可以啦。

vue使用npm run build命令打包项目

首先

命令行执行npm run build命令,命令需要在项目目录下执行

C:\Users\John\Desktop\demo>npm run build   我的是一个在桌面叫demo的项目

出现以下提示表示打包完成:

vue使用npm run build命令打包项目

然后

我们就可以像打开静态网页一样打开我们完成的项目。

下图为打包生成的dist文件夹,其中index.html为入口文件:

vue使用npm run build命令打包项目

没错,这时你打开了index.html文件,发现网页一片空白,打开F12发现console报了几个错误,状态码为404:

vue使用npm run build命令打包项目

这是因为引用资源的路径问题,我们只要在下图的地方修改一下再打包就可以了。

需要修改的文件在项目目录下的config文件夹里的index.js文件

vue使用npm run build命令打包项目

改完,再次执行npm run build,然后打开index.html发现sucess

demo

完。


 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛