我使用哪个命令来生成 Vue 应用程序的构建？

Question

使用 vue-cli 开发了 Vue 应用后我应该做什么？

在Angular中有一些命令将所有脚本捆绑到一个脚本中。

在Vue中有相同的东西吗？

Answer 1

我认为您是这样创建项目的：

vue init webpack myproject

嗯，现在你可以运行

npm run build

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

Answer 2

如果您运行遇到路径问题，也许您需要将 config/index.js 文件中的 assetPublicPath 更改为您的子目录：

http://vuejs-templates.github.io/webpack/backend.html

Answer 3

在您的终端中

npm run build

并且您托管了 dist 文件夹。更多 see this video

Answer 4

如果您使用以下方法创建项目：

vue init webpack myproject

您需要将 NODE_ENV 设置为生产和运行，因为该项目已为开发和生产配置了 Web 包：

NODE_ENV=production npm run build

将 dist/ 目录复制到您的网站根目录。

如果您使用 Docker 进行部署，则需要一个快速服务器，为 dist/ 目录提供服务。

Docker文件

FROM node:carbon

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app
ADD . /usr/src/app
RUN npm install

ENV NODE_ENV=production

RUN npm run build

# Remove unused directories
RUN rm -rf ./src
RUN rm -rf ./build

# Port to expose
EXPOSE 8080
CMD [ "npm", "start" ]

Answer 5

此命令用于启动开发服务器：

npm run dev

此命令用于生产构建：

npm run build

确保查看并进入生成的名为 'dist' 的文件夹。
然后开始将所有这些文件推送到您的服务器。

Answer 6

不使用 VUE-CLI 执行此操作的一种方法是将所有脚本文件捆绑到一个胖 js 文件中，然后将该大胖 javascript 文件引用到主模板文件中。

我更喜欢使用 webpack 作为打包器，并在项目的根目录中创建一个 webpack.conig.js。所有配置，如入口点、输出文件、加载程序等，都存储在该配置文件中。之后，我在 package.json 文件中添加一个脚本，该脚本使用 webpack.config.js 文件进行 webpack 配置，并开始监视文件并在 webpack.config.js 文件中提到的位置创建一个 Js 捆绑文件。

Answer 7

我觉得你可以用vue-cli

如果您使用 Vue CLI 以及处理静态资产作为其部署一部分的后端框架，您需要做的就是确保 Vue CLI 在正确的位置生成构建文件，然后进行部署您的后端框架的说明。

如果您正在独立于后端开发前端应用程序 - 即您的后端公开一个 API 供您的前端与之对话，那么您的前端本质上是一个纯静态应用程序。你可以将 dist 目录中的构建内容部署到任何静态文件服务器，但请确保设置正确的 baseUrl

Answer 8

npm 运行 build - 这将丑化和缩小代码
将 index.html 和 dist 文件夹保存在您网站的根目录中。
您可能感兴趣的免费托管服务 -- Firebase 托管。

Answer 9

如果您在创建项目时使用了 vue-cli 和 webpack。

你可以只使用

npm 运行 build 命令在命令行中，它会在你的项目中创建 dist 文件夹。只需将此文件夹的内容上传到您的 ftp 即可。

Answer 10

如果你想构建并发送到你的远程服务器，你可以使用 cli-service (https://cli.vuejs.org/guide/cli-service.html) 你可以创建任务来服务，构建和部署一些特定的插件作为 vue-cli-plugin-s3-deploy

Answer 11

运行的特定代码的命令列在您的 package.json 文件的脚本下。这是我的一个例子：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

如果您要在本地查看运行您的网站，您可以使用

进行测试

npm serve

如果您正在为生产准备网站，您可以使用

npm build

此命令将生成一个 dist 文件夹，其中包含您站点的压缩版本。

Answer 12

这是为了部署到自定义文件夹（如果您希望您的应用程序不在根目录下，例如 URL/myApp/) - 我找了很长时间才找到这个答案...希望它对某人有所帮助。

在 https://cli.vuejs.org/guide/ 获取 VUE CLI 并使用 UI 构建使其变得简单。然后在配置中，您可以将 public 路径更改为 /whatever/ 并将 link 更改为 URL/whatever.

观看此视频，了解如何使用 CLI 创建 vue 应用程序（如果您需要更多帮助）：https://www.youtube.com/watch?v=Wy9q22isx3U

Answer 13

要将您的应用程序部署到产品环境，请添加

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

在 package.json 文件中的脚本中。

打开你的main.js并添加

Vue.config.productionTip = false;

在您导入之后。然后在项目文件夹中打开你的 cli 和运行这个命令

npm run build

这将在您的项目目录中创建一个 dist 文件夹，您可以将该 dist 文件夹上传到您的主机中，您的网站将会上线

Answer 14

vue 文档提供了很多关于如何部署到不同主机提供商的信息。

npm run build

您可以从包 json 文件中找到它。脚本部分。它提供用于测试和开发以及构建生产环境的脚本。

您可以使用 netlify 等服务，它会通过从他们的网站链接您的 github 项目存储库来捆绑您的项目。它还提供了有关如何在 heroku 等其他站点上进行部署的信息。

您可以在此找到更多详细信息here

Answer 15

首先全局安装Vue Cli

npm install -g @vue/cli

要创建一个新项目，运行：

vue create project-name

运行 vue

npm run serve

Vue CLI >= 3 使用相同的 vue 二进制文件，因此它覆盖了 Vue CLI 2 (vue-cli)。如果你仍然需要遗留的 vue init 功能，你可以安装一个全局桥：

Vue 全局初始化

npm install -g @vue/cli-init

vue init 现在与 vue-cli@2.x

完全一样

Vue 创建应用程序

vue init webpack my-project

运行开发者服务器

npm run dev

Answer 16

对于 NPM => npm 运行构建对于 Yarn => yarn 运行 build

您还可以检查 package.json 文件中的脚本

Answer 17

你在项目根目录下写下下面的命令。

npm run build

Answer 18

如果你使用的是 npm，你可以使用 npm run build 但如果你使用的是纱线，你可以简单地运行 yarn build

我使用哪个命令来生成 Vue 应用程序的构建？

Which command do I use to generate the build of a Vue app?

vue.js

vuejs2

vue-cli

vue init 现在与 vue-cli@2.x