vue使用npm run build命令打包

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

 

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

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

首先

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

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

出现如下提示表示打包完成:npm

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

而后

咱们就能够像打开静态网页同样打开咱们完成的项目。api

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

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

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

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

这是由于引用资源的路径问题,咱们只要在下图的地方修改一下再打包就能够了。spa

须要修改的文件在项目目录下的config文件夹里的index.js文件命令行

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

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

demo

完。