如何 运行 在 VueJs 中构建产品？

Question

我在本地做过一个 VueJs 项目。现在我必须把它上传到我大学的虚拟机上，它会变成 public。我想我不应该上传整个目录，而应该只上传我用命令创建的 'dist' 目录：

npm run build

第一个问题：正确吗？

第二个问题：我现在如何运行服务器？对于本地测试，我曾经使用以下命令 运行 它：

npm run serve

但我想现在我应该使用一些其他命令。

感谢您的帮助。

Answer 1

问题回答：

1. 是的。没错。

2. 通常，您需要在 Web 服务器中提供 dist 文件夹。喜欢 nginx or apache.

它将为您的 index.html 服务，在您的 vuejs 应用程序的构建步骤中生成的 /dist 文件夹中。

Obs.: 你不应该在 production 中使用 npm run serve 服务你的应用程序，因为它是一个单线程的开发服务器。

Answer 2

只是简单

npm run build

复制 index.html 和 /dist/ 文件夹到您的网站根目录。完成。

Answer 3

1. 命令 npm run build 准备部署项目是正确的。

2. 您不需要像在本地那样运行命令npm run serve。

在 运行 执行命令 npm run build 之后部署需要的是：

dist 文件夹和 index.html 文件。

您可以将您的项目部署到您选择的任何托管服务提供商。

静态应用我会以aws s3为例（其他平台的流程几乎一样）

1. 登录 aws

2. Select s3

3. 创建一个新的存储桶（给它一个首选名称和select区域）

4. 在您刚刚创建的存储桶上启用静态网站托管选项。 索引文档和错误文档的字段应设置为index.html

5. 设置桶权限（添加桶策略）

将其粘贴到存储桶策略编辑器中并保存。 将 your-bucketName 更改为创建的存储桶名称

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::your-bucketName/*"
            ]
        }
    ]
}

6. 上传文件（build.js 在 dist 文件夹和 index.js)

   1. 单击您的存储桶名称
   2. Select 在顶部菜单上传
   3. 上传上述文件

7. 在您的存储桶中创建一个名称为 dist 的文件夹，并将 build.js 移动到其中。

8. 单击所有存储桶返回。 Select Properties 右上角菜单中已部署的存储桶和 单击 Endpoint 以午餐您的托管站点。