小开

最佳答案

我认为你的项目是这样的:

vue init webpack myproject

现在你可以跑了

npm run build

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

小开

如果路径遇到问题，可能需要将 config/index.js文件中的 assetPublicPath更改为子目录:

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

小开

在你的终端里

npm run build

你主机的 dist 文件夹。为更多的看看这个视频

小开

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

vue init webpack myproject

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

NODE_ENV=production npm run build

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

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

文件夹

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" ]

小开

这个命令用于启动开发服务器:

npm run dev

此命令用于生产构建:

npm run build

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

小开

不使用 VUE-CLI 的一种方法是将所有脚本文件绑定到一个胖 js 文件中，然后将这个胖 javascript 文件引用到主模板文件中。

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

小开

我觉得你可以用 Vue-cli

如果您使用 Vue CLI 和一个后端框架来处理静态资产，并将其作为部署的一部分，那么您所需要做的就是确保 Vue CLI 在正确的位置生成构建文件，然后遵循后端框架的部署指令。

如果你正在开发你的前端应用程序与你的后端分开-也就是说，你的后端为你的前端提供了一个可以交谈的 API，那么你的前端基本上是一个纯静态的应用程序。您可以将 dist 目录中构建的内容部署到任何静态文件服务器，但是请确保设置了正确的 baseUrl

小开

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

小开

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

你可以用

Npm 在命令行中运行 build 命令，它将在项目中创建 dist 文件夹。只要把这个文件夹的内容上传到你的 ftp 就可以了。

小开

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

小开

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

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

如果希望在本地运行站点，可以使用

npm serve

如果您正在寻找准备生产您的网站，您将使用

npm build

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

小开

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

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

如果你需要更多的帮助，看看这个视频，它解释了如何使用 CLI 创建一个价值应用程序: https://www.youtube.com/watch?v=Wy9q22isx3U

小开

要将应用程序部署到 prod 环境，请添加

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

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

打开你的主文件，然后添加

Vue.config.productionTip = false;

就在你们进口之后。然后打开项目文件夹中的 cli 并运行以下命令

npm run build

这将在您的项目目录中建立一个 dist 文件夹，您可以将该 dist 文件夹上传到您的主机上，您的网站将处于活动状态

小开

Vue 文档提供了关于如何部署到不同主机提供程序的大量信息。

npm run build

您可以从包 json 文件中找到这一点。剧本部分。它提供用于测试、开发和生产构建的脚本。

您可以使用诸如 netlify 之类的服务，这些服务通过将您的项目的 github repo 从它们的站点链接起来，从而将您的项目捆绑在一起。它还提供了有关如何在其他站点(如 heroku)上部署的信息。

你可以在这个给你上找到更多的细节

小开

全局首次安装 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 Init Global

npm install -g @vue/cli-init

Vue init 现在的工作方式与 vue-cli@2.x 完全相同

Vue 创建应用程序

vue init webpack my-project

运行开发人员服务器

npm run dev

小开

对于 NPM = > NPM 运行 Build 对于纱线 = > 纱线运行建立

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

小开

您可以在项目根目录下写下以下命令。

npm run build

小开

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

小开

如果要为域创建生成，可以使用 $ npm run build命令。

如果你要构建一个子域，请遵循以下说明:

在根目录中创建一个名为 vue.config.js的文件
在 vue.config.js文件中写下以下代码:

module.export = {
publicPath: '/demo-project',
}

现在运行 $ npm run build

注意: 使用 子域名代替“/demo-project”。

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

Vue init 现在的工作方式与 vue-cli@2.x 完全相同