通过vue-cli和webpack构建的项目体积一般都较大,在生产环境下,需要进行打包部署。
1.准备
-
打包前,将config目录下的index.js文件做修改,将assertsPublicPath的"/"修改为"./"
- 路由模式修改
将router下的index.js路由文件的history模式去掉
2.打包
- 项目路径下,运行打包命令
npm run build
-
build结束后的结果,项目路径会出现一个dist目录
-
进入dist目录
3.部署
-
解压nginx到本地目录
-
复制打包的dist文件夹到nginx的html目录
命令行进入nginx目录后,运行
start nginx
一闪而过
- 打开浏览器,输入http://localhost,可以看到nginx的首页
输入http://localhost/dist,可以看到项目运行结果