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

如何解决如何在 VueJs 中运行生产构建？

我在本地参与了一个 VueJs 项目。现在我必须将它上传到我大学的虚拟机上，它将成为公开的。我想我不应该上传整个目录，而应该只上传我使用命令创建的“dist”目录：

npm run build

第一个问题：正确吗？

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

npm run serve

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

感谢您的帮助。

解决方法

回答问题：

1. 是的。没错。

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

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

注意事项：您不应在生产中使用 npm run serve 为您的应用程序提供服务，因为它是单线程开发服务器。

,

很简单

npm 运行构建

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

,

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

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

运行命令 npm run build 后，部署所需的内容是：

dist 文件夹和 index.html 文件。

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

我将使用 aws s3 作为静态应用程序的示例（该过程在其他平台中几乎相同）。

1. 登录 aws

2. 选择 s3

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

4. 在您刚刚创建的存储桶上启用静态网站托管选项。 Index Document 和 Error Document 的文件应该设置为 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. 上传文件（dist文件夹中的build.js和index.js）

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

7. 在您的存储桶中创建一个名为 dist 的文件夹，然后将 build.js 移到里面。

8. 点击所有存储桶返回。在右上角的菜单中选择您部署的存储分区的属性，然后 点击端点，为您的托管网站提供午餐。