使用Vue-cli创建的项目部署生产模式

时间:2017-04-25 19:00:11

标签: node.js ubuntu vue.js

一个n00b问题: 我使用webpack用vue-cli创建了项目。 在我的Windows机器上,我运行" npm un dev"我得到了HMR的前端服务器等等。 现在我想将我的应用程序部署到生产机器 - 在DigitalOcean上的ubuntu。

我必须采取哪些步骤?我不太熟悉它应该如何工作的逻辑。如果我的ubuntu机器将NODE_ENV设置为生产,它将无法安装任何devDependancies,并且我无法构建任何内容。所以我想我必须改变它吗?如果是,那么它没有任何意义,因为它是一台生产机器。

我是否必须创建另一个节点/快速服务器来为index.html提供服务?不知道它应该以某种方式开箱即用吗?

谢谢:)

1 个答案:

答案 0 :(得分:3)

TL; DR在您的本地计算机上构建,您需要的所有内容都将在./dist/目录中输出,只需将内容复制到生产服务器上的webroot,您就可以了。< / p>

webpack模板为您处理大部分内容。

您需要采取的步骤:

  1. 在本地计算机上运行npm run build
  2. 将生成的./dist/目录的内容复制到服务器webroot
  3. 那就是它!
  4. 当您运行npm run build时,预配置的构建脚本会将节点环境设置为生产环境,并且仅使用应该生产的内容进行构建,它还会优化代码并删除调试功能。当涉及到依赖关系时,webpack负责处理并将它们包含在./dist/js/中生成的javascript文件中,因此您无需关心复制node_modules/目录。 它还会将static目录和src/assets目录中的所有内容复制到./dist/目录,以准备发布。并解析所有对webpack生成的新路径的引用。

    生产服务器不应该关注构建vue应用程序,在本地计算机上运行build命令以保持dev依赖性远离生产服务器。我建议不要在生产服务器上安装webpack和其他开发工具。它只是用那里不需要的东西污染服务器。 某些开发工具可能会在生产服务器上产生很多问题。所以最好的做法是永远不要安装它们。

    您可以选择创建自己的使用ftp或rsync的发布脚本,无论您希望将./dist/目录中的所有内容复制到生产服务器webroot。这可能是bash中的一个脚本,如果在windows上,可以在git bash或类似的东西中运行它。

    希望能够解决问题,祝贺你的第一个vue发布!