12 前端项目打包部署

通过vue-cli和webpack构建的项目体积一般都较大，在生产环境下，需要进行打包部署。

1.准备

• 打包前，将config目录下的index.js文件做修改，将assertsPublicPath的"/"修改为"./"

  
  
  路径修改
• 路由模式修改
  将router下的index.js路由文件的history模式去掉

2.打包

• 项目路径下，运行打包命令

npm run build

• build结束后的结果，项目路径会出现一个dist目录

  
  
  image.png

• 进入dist目录

  
  
  dist目录文件

3.部署

• 解压nginx到本地目录

  
  
  nginx

• 复制打包的dist文件夹到nginx的html目录

  
  
  image.png

• 命令行进入nginx目录后，运行

start nginx

一闪而过

• 打开浏览器，输入http://localhost，可以看到nginx的首页
  
  image.png

输入http://localhost/dist，可以看到项目运行结果

运行项目