logo标签列表

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

vue.jsvuejs2vue-cli
161

使用 vue-cli 开发好一个 Vue 应用后，我应该做什么？

Angular 中有一些命令可以将所有脚本捆绑成一个单独的脚本。那么Vue中是否有类似的功能呢？

它应该是 cli 的一部分，这里是部署文档页面 https://vuejs.org/v2/guide/deployment.html 根据你使用的版本和模板，可能会有所不同。但是你应该像文档中那样指定正在进行生产构建。 - Swimburger
2
我使用2.2.1版本的Vue。我查看了文档，但没有关于部署的信息。我在托管服务器上没有使用Node.js。因此，当我在本地主机上启动它时，它可以正常工作，但是当我将所有文件下载到托管服务器上时，页面上什么也没有显示。 - artem0071
8
当您进行构建时，它很可能会将所有文件（html、css、js）编译到/dist文件夹中。该dist文件夹应成为您在主机上托管应用程序的根目录。（我还没有使用Vue2，但我敢打赌它也会这样做） - Swimburger
嘿，大家好。上周我遇到了同样的问题，并写了一些东西，如果有帮助的话可以看看：https://medium.com/@seenickcode/deploying-a-vue-js-2-x-app-to-heroku-in-5-steps-tutorial-a69845ace489 - seenickcode
1
我已经将dist文件夹中的文件上传到cpanel，但它只显示空白。 - Fayaz
19个回答
199

我想你是这样创建你的项目的：

vue init webpack myproject

好的，现在你可以运行

npm run build

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

1
不需要运行 npm start 或类似的命令吗？ - nu everest
这似乎无法与Vue路由器一起使用...我做错了什么吗？ - Andy Hayden
@AndyHayden 如果您的服务器对所有请求（包括404）返回index.html，则此方法可以正常工作（因为应该如此）。如果这并没有帮助，请澄清在您的情况下“不起作用”是什么意思。 - Egor Stambakio
1
@AndyHayden，AWS S3检查以下三点：1）索引和错误文档是否为index.html；2）是否设置了策略（适用于静态网站）；3）您的build.js是否在S3的dist文件夹中，并且index.html位于根目录。 - Egor Stambakio
9
答案应为：“dist文件夹的内容就是你所需的。你不需要复制 /index.html，只需要 dist 文件夹中的 index.html。此外，在运行 npm run build 之前，你应该在 config/index.js 中配置生产路径。” - David 天宇 Wong
显示剩余5条评论
29

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

vue init webpack myproject

你需要将 NODE_ENV 设置为 production 并运行，因为该项目已经配置了适用于开发和生产的 Webpack:

NODE_ENV=production npm run build

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

如果您正在使用Docker部署，您需要一个Express服务器，可以提供dist/目录的服务。

Dockerfile

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" ]
你是将该容器暴露给外部，还是使用Nginx或Apache作为代理？ - Hakim
是的，你可以使用Apache或Nginx作为代理，端口80。 - Akinjide
可以将 WORKDIR /usr/src/app 改为 WORKDIR /app 吗？另外，是否需要使用 http 服务器来提供服务，而不是使用 CMD [ "npm", "start" ]？如果需要，可以使用 CMD [ "http-server", "dist" ]。 - LOG_TAG
版本: webpack 3.12.0 时间: 16548ms 资源大小 块名称 build.js 2.15 MB 0 [emitted] [big] main build.js.map 9.74 MB 0 [emitted] main - 运行以上命令后会出现这个，您能指导我下一步如何将其投入运营吗？ - user13120736
10

在你的终端中

npm run build

如果你是主机托管的dist文件夹，请查看此视频以获取更多信息。

这错误地假定package.json中存在构建脚本。 - crash springfield
6
当OP特别询问使用vue-cli创建的Vue应用程序时，可以做出准确的假设。 - Dan Fletcher
7
为了将您的应用程序部署到生产环境，请添加以下内容：
"build": "vue-cli-service build --mode prod"

请在 package.json 文件的脚本中添加。

打开 main.js 并添加如下内容：

Vue.config.productionTip = false;

在您的导入语句之后，添加以下代码。然后在项目文件夹中打开命令行界面并运行此命令。
npm run build

这将在您的项目目录中创建一个名为“dist”的文件夹，您可以将该“dist”文件夹上传到您的主机上，您的网站将正式上线。

5
请确保更改build: { ..... assetsPublicPath: './', 前面的那个点很重要。但是在该文件中dev对象中也有一个assetsPublinPath，因此请确保更改正确的路径。 - Shane G
版本：webpack 3.12.0 时间：16548毫秒 资源大小 块名称 构建.js 2.15 MB 0 [已发射] [大] main 构建.js.map 9.74 MB 0 [已发射] main - 运行上述cmd命令后会出现这个，你能否指导我接下来的步骤以使其上线？ - - user13120736
3
Vue文档提供了大量关于如何将应用部署到不同主机提供商的信息。
npm run build

你可以从package.json文件中的scripts部分找到这个内容。它提供了测试、开发和构建生产所需的脚本。
你可以使用像netlify这样的服务，通过将你的github仓库链接到他们的网站上来打包你的项目。它还提供了如何在其他网站上部署的信息。
你可以在这里找到更多详细信息。
执行此操作会创建一个 dist 文件夹，其中包含捆绑的 JS/CSS 和 HTML 文件，可轻松部署到任何托管服务。 - Tyler Morales
2

部署到自定义文件夹（如果您想将应用程序放在非根目录下，例如URL/myApp/）- 我花了很长时间才找到这个答案……希望能帮助到某些人。

获取VUE CLI，网址为https://cli.vuejs.org/guide/，使用UI构建使其更加容易。然后在配置中，您可以将公共路径更改为/whatever/并链接到URL/whatever。

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

2

对于NPM => 运行命令 npm run Build 对于Yarn => 运行命令 yarn run build

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

2
您需要在项目根目录下键入以下命令。
npm run build
2

运行特定代码的命令在package.json文件的scripts下列出。这是我的一个例子:

Original Answer翻译成"最初的回答"

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

如果您想在本地运行您的网站，您可以使用“最初的回答”进行测试。
npm serve

如果您想为您的网站做好生产准备，您将使用"最初的回答"。
npm build

这个命令将生成一个“dist”文件夹，其中包含您网站的压缩版本。"最初的回答"
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接