为 Vue JS 项目构建 dist 文件夹答案

【问题标题】：Building a dist folder for Vue JS project为 Vue JS 项目构建 dist 文件夹
【发布时间】：2021-08-04 20:52:37
【问题描述】：

我正在尝试为不同的环境（坐、uat、生产）创建分发文件夹。为此，我已经开始为我的 Vue js 项目使用 .env 文件。我在做什么 yarn sat 或 npm run sat。我的错。 linux 框中的文件夹未正确创建。但在我的 Windows 机器上它工作正常。在我的 package.json 中，针对不同的环境有不同的脚本。

"sit": "vue-cli-service --mode sit build",

在我的 Windows 机器中，这就是 dist 文件夹的创建方式。

我不确定是什么问题。在我的开发部门中，我有 "@vue/cli-service": "^3.0.0-beta.15"

【问题讨论】：

未正确创建是什么意思？错误是什么？
如果你看到图片，在windows机器上，所有的文件夹都是像js,css,fonts,image这样创建的。但是在linxu中，js只是直接在dist文件夹中，我没有img,css文件夹。

标签： npm webpack vue.js vuejs2

【解决方案1】：

当您使用vue-cli-service 构建时，您的mode 确实会触发包括您设置的相应.env 文件。但是，无论您拥有多少环境，vue-cli-service 默认情况下仅构建两种不同类型的发行版，具体取决于--mode 开关：

production，这是默认的mode（或者您可以使用--mode production 指定它；或者
非生产，在您的情况下是 --mode sit 和 --mode uat。

默认情况下，当您为production 构建应用程序时，您的应用程序会被捆绑起来，您会根据您的设置获得js 目录、css 等。对于您指定的任何其他mode，它会构建一个未捆绑应用程序的非生产发行版，因此您将看不到js 文件夹。这是默认设置。

现在，在您的情况下，您要说的是，它的执行方式因操作系统而异。我不知道您的确切设置，但您要么在两台机器上存在环境差异，要么运行不同的命令，要么vue-cli-service 中存在缺陷，您可能需要提出问题。双重/三重检查您的环境和您正在运行的命令。

顺便说一句，如果您尝试为不同的环境进行构建，您可能需要将 dest 开关添加到您的构建命令中，以便您可以构建到不同的目录 - 例如：

"sit": "vue-cli-service build --mode sit --dest ./dist/sit",
"uat": "vue-cli-service build --mode uat --dest ./dist/uat",
"production": "vue-cli-service build --mode production --dest ./dist/production"

【讨论】：

【解决方案2】：

我终于解决了这个问题。
首先，我们可以根据我们的要求使用尽可能多的.env-file。如果您想使用和创建类似产品的dist-文件夹，您必须在文件顶部指定NODE_ENV。
例如，如果我希望我的uat 环境包与生产环境包相同（这应该与我们必须部署在服务器上的生产环境相同），只需在属性文件前添加NODE_ENV=production。

在你的package.json，你必须添加

"prod": "vue-cli-service --mode prod build"

在创建包时，您可以使用npm run prod 或yarn prod，无论您使用哪个。

发生的问题是，对于其他一些要求，我们将 NODE_ENV 设置为其他值。
如果NODE_ENV 已经设置为一些垃圾值，则包构建没有正确进行。但是当我取消设置环境变量时，一切都很好。

现在，我根据环境有多个.env-文件，我可以创建类似于生产环境的dist-文件夹，以便在各自的环境中进行部署。

【讨论】：