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