Vue 项目（ 生产环境 ）的部署

Vue 是一个 JS 的前端框架，注定了它运行在浏览器端，对服务器本地没有任何要求，只要一个静态文件服务器能通过 http 访问到其资源文件就足矣！无论是用 apache、ngnix，甚至用 Node.js 自己实现一个静态文件服务器也可以。

如何打包

开发完成之后，在项目的根目录运行以下命令：

// 为什么要打包文件？因为打包之后的文件体积会变小，加载起来更快，而且条理更清晰
   npm run build

==> 代码执行，自动生成的 dist 目录，就是打包构建后的项目目录。

即，打包结束后，可以看到项目目录中多了一个 dist 文件夹，这个文件夹中就是项目打包之后所构建的静态资源。

部署方式的选择

把生成的 dist 文件夹（ 不要上传文件夹 ）里的内容上传到 http 静态服务器上就可以通过 http 来访问了。

对于前后端分离的项目，主要有以下两种部署方式：

• 统一部署：将打包生成的静态资源复制到后端项目的静态目录下，然后通过 Tomcat 等服务器启动即可。
• 分别部署（ 推荐 ）：前端，放在一个独立环境中，如启动一个 Node.js 服务或使用 Nginx 部署

而后端，照常使用 Tomcat 等服务器进行启动，两者互不干扰，这样有利于前后端各自水平扩展。