ChatGPT解决这个技术问题 Extra ChatGPT

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

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

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

Vue中是否有相同的东西?

它应该是 cli 的一部分,这里是部署文档页面 vuejs.org/v2/guide/deployment.html 根据您拥有的版本、使用的模板,它可能会有所不同。但是您应该指定您正在像文档中那样进行生产构建。
我使用 2.2.1 vue。我看到了文档,但没有关于部署的信息。我没有在主机上使用 nodejs。因此,当我在 localhost 中启动它时它可以工作,但是当我将所有文件下载到主机时,页面上没有任何内容
当您进行构建时,它可能会将所有文件(html、css、js)编译到 /dist 文件夹中。这个 dist 文件夹应该是您主机上应用程序的根目录。 (我还没有使用 Vue2,但我敢打赌它会在那里)
嘿伙计们,我上周遇到了同样的问题,如果对任何人有帮助,我就写下来:medium.com/@seenickcode/…
我已将 dist 文件夹中的文件上传到 cpanel,但它只显示空白

E
Egor Stambakio

我认为您已经创建了这样的项目:

vue init webpack myproject

好了,现在你可以运行了

npm run build

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


是否不需要运行 npm start 或类似的东西?
@nueverest 如果您刚刚使用 vue init webpack myproject 创建了项目,您将在控制台中看到更多说明:cd myprojectnpm install。在 npm install 下载所有包之后,vue 可以使用 npm run dev 编译开发服务器 + 热重载,或者使用 npm run build 创建可部署的包。
这似乎不适用于 vue 路由器......我做错了吗?
@AndyHayden AWS S3 检查 1) 索引 &错误文档 === index.html; 2) 设置策略for static website; 3) 您的 build.js 位于 s3 上的 dist 文件夹中,而 index.html 位于根目录中。
答案应该是“您只需要 dist 文件夹的内容。您不需要复制 /index.html,只需要 dist 文件夹中的 index.html。此外,在运行 {5 } 您应该在 config/index.js" 中配置您的生产路径。
A
Akinjide

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

vue init webpack myproject

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

NODE_ENV=production npm run build

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

如果您使用 Docker 进行部署,则需要一个快速服务器,为 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 作为代理?
是的,你会使用 Apache 或 Nginx 作为代理,端口 80
paste.ubuntu.com/p/dryhSwnYh5 WORKDIR /usr/src/app 可以是 WORKDIR /app 吗?通过 http 服务器提供服务还需要 CMD ["http-server", "dist"] 吗?而不是 CMD ["npm", "start"]
版本:webpack 3.12.0 时间:16548ms 资产大小块块名称 build.js 2.15 MB 0 [emitted] [big] main build.js.map 9.74 MB 0 [emitted] main - 这是在将上述 cmd 运行到项目后出现文件夹——你能指导我完成下一步进入生活吗? –
a
anasmorahhib

在你的终端

npm run build

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


这错误地假设 package.json 中存在构建脚本。
@crashspringfield 当 OP 专门询问使用 vue-cli 创建的 Vue 应用程序时做出的准确假设
S
Simon Forsberg

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

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


确保更改 build: { ..... assetsPublicPath: './',正斜杠前的点很重要。但是该文件的 dev 对象中也有一个 assetsPublinPath,因此请务必更改正确的。
版本:webpack 3.12.0 时间:16548ms 资产大小块块名称 build.js 2.15 MB 0 [emitted] [big] main build.js.map 9.74 MB 0 [emitted] main - 这是在将上述 cmd 运行到项目后出现文件夹——你能指导我完成下一步进入生活吗? –
M
MaBbKhawaja

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

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

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

打开你的 main.js 并添加

Vue.config.productionTip = false;

在你的进口之后。然后在项目文件夹中打开您的 cli 并运行此命令

npm run build

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


B
BrianDev

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

npm run build

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

您可以使用诸如 netlify 之类的服务,该服务将通过从他们的站点链接您的项目的 github 存储库来捆绑您的项目。它还提供了有关如何在其他站点(例如 heroku)上部署的信息。

您可以找到有关此 here 的更多详细信息


这样做会创建一个包含捆绑的 JS/CSS 和 HTML 的 dist 文件夹,以便在任何托管服务中轻松部署
G
Gene Yllanes

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

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

如果您希望在本地运行您的网站,您可以使用

npm serve

如果您希望为生产做好准备,您可以使用

npm build

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


R
Rick K.

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

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

如果您需要更多帮助,请观看此视频,其中介绍了如何使用 CLI 创建 vue 应用程序:https://www.youtube.com/watch?v=Wy9q22isx3U


Z
Zaheer Alvi

对于 NPM => npm run Build For Yarn => yarn run build

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


S
Saurav gupta

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

npm run build

J
Jamil Ahmed

首先全局安装 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

F
Farcrew Rz

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

npm run dev

此命令用于生产构建:

npm run build

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


Y
Yash_6795

不使用 VUE-CLI 的一种方法是将所有脚本文件捆绑到一个 fat js 文件中,然后将那个大的 fat javascript 文件引用到主模板文件中。

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


L
Loveun CG

我认为你可以使用 vue-cli

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

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


你是对的,但正如公认的答案所示,问题是要运行哪个命令
佚名

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


u
user3348410

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

你可以只使用

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


只需将 dist 文件夹上传到您的 ftp 即可完成?以及如何访问服务器上的 Vue 应用程序?
K
Kaddu Livingstone

如果您使用的是 npm,您可以使用 npm run build,但如果您使用的是 yarn,您可以简单地运行 yarn build


d
doijunior

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


关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅