151

使用Vue开发应用程序后我应该做什么vue-cli

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

Vue中是否有相同的东西?

4

18 回答 18

187

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

vue init webpack myproject

好了,现在你可以运行了

npm run build

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

于 2017-03-22T07:08:58.000 回答
28

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

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" ]
于 2017-11-29T14:19:37.830 回答
10

in your terminal

npm run build

and you host the dist folder. for more see this video

于 2017-11-29T14:08:42.890 回答
4

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

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

于 2017-08-15T15:18:55.977 回答
3

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

npm run build

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

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

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

于 2020-07-12T14:42:23.130 回答
3

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

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

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

打开你的 main.js 并添加

Vue.config.productionTip = false;

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

npm run build

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

于 2020-02-07T06:21:55.473 回答
2

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

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

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

于 2019-07-21T12:43:42.673 回答
2

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

npm run build
于 2021-06-18T11:22:06.670 回答
2

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

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

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

npm serve

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

npm build

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

于 2019-05-30T13:48:03.493 回答
2

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

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

于 2020-11-26T12:44:14.913 回答
1

首先全局安装 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
于 2020-07-24T08:02:38.700 回答
0

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

你可以只使用

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

于 2018-11-01T03:43:57.210 回答
0

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

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

于 2018-07-14T04:22:36.233 回答
0

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

npm run dev

此命令用于生产构建:

npm run build

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

于 2018-04-16T09:25:54.093 回答
0
  1. npm run build - 这将丑化和缩小代码

  2. 将 index.html 和 dist 文件夹保存在您网站的根目录中。

  3. 您可能感兴趣的免费托管服务——Firebase 托管。

于 2018-10-23T18:20:58.927 回答
0

我认为你可以使用 vue-cli

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

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

于 2018-09-17T11:47:00.173 回答
0

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

于 2022-02-28T07:11:17.477 回答
-1

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

于 2019-05-24T12:34:45.903 回答