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

本文介绍了如何使用Vue CLI构建项目并将其部署到服务器。首先,在项目目录下执行`npm run build`进行打包,成功后会在dist目录生成用于部署的文件。接着,由于资源路径问题,可能在打开index.html时遇到404错误。解决方法是在config/index.js中调整引用路径。修复后重新打包,即可正常显示项目。
摘要由CSDN通过智能技术生成

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

首先

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

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

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

然后

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

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

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

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值