如何部署Vue应用程序?


130

使用Vue开发应用程序后该怎么办vue-cli

Angular中,有一些命令将所有脚本捆绑到一个脚本中,然后将这些文件发送到主机。

Vue是否有相同的东西?


它应该是cli的一部分,这是部署文档页面vuejs.org/v2/guide/deployment.html取决于您使用的版本,使用的模板,它可能会有所不同。但是您应该指定要像在文档中那样进行生产构建。
Swimburger,2017年

2
我使用2.2.1 vue。我看到了文档,但是没有有关部署的信息。我不在托管服务器上使用nodejs。因此,当我在本地主机中启动它时,它可以工作,但是当我将所有文件下载到主机时,页面上没有任何内容
artem0071 2017年

8
进行构建时,它可能会将所有文件(html,css,js)编译到/ dist文件夹中。该dist文件夹应该是您的应用程序在您主机上的根目录。(我还没有使用Vue2,但我敢打赌它会在那儿)
Swimburger,2017年

大家好,我上周也遇到了同样的问题,并写了一篇对任何人都有
seenickcode

我已将文件从dist文件夹上传到cpanel,但显示为空白
Fayaz

Answers:


170

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

vue init webpack myproject

好了,现在您可以运行

npm run build

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


1
不需要运行npm start或类似的东西吗?
nu珠穆朗玛峰

@nueverest(如果您刚刚与vue init webpack myproject您一起创建了项目)将在控制台中看到更多说明:cd myprojectnpm install。在npm install下载所有软件包之后,vue可以npm run dev用于开发服务器+热重载,也可以npm run build用于创建可部署的捆绑包进行编译。
Egor Stambakio

这似乎不适用于vue路由器...我做错什么了吗?
安迪·海登

1
@AndyHayden AWS S3检查是否1)索引和错误文档=== index.html; 2)为静态网站制定政策;3)你build.js是里面dist的S3文件夹,然后index.html在根。
Egor Stambakio

9
答案应该是“内容dist文件夹是你所需要的。你并不需要复制/index.html,但只有index.html在在dist文件夹中是必要的。另外,在运行之前npm run build,你应该在配置您的生产路径config/index.js”。
大卫·天宇·王

24

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

vue init webpack myproject

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

NODE_ENV=production npm run build

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

如果要使用Docker进行部署,则需要一个提供dist/目录的Express服务器。

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

将该容器暴露在外面还是使用Nginx或Apache作为代理?
哈基姆

是的,您将使用Apache或Nginx作为代理,端口80
akinjide

paste.ubuntu.com/p/dryhSwnYh5 WORKDIR / usr / src / app可以是WORKDIR / app吗?还需要通过http服务器提供服务的CMD [“ http-server”,“ dist”]吗?而不是CMD [“ npm”,“ start”]
LOG_TAG,

版本:webpack 3.12.0时间:16548ms资产大小块块名称build.js 2.15 MB 0 [emitted] [big] main build.js.map 9.74 MB 0 [emited] main –在将上述cmd运行到项目后出现文件夹–您能否指导我完成下一步工作?–
Hamendra Sunthwal


4

如果遇到与你的路径问题,也许你需要改变assetPublicPath你的config/index.js文件到您的子目录:

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


确保更改内部版本:{..... assetPublicPath:'./',正斜杠前的点很重要。但是该文件的dev对象中也有一个assetPublinPath,因此请确保更改正确的。
Shane G

版本:webpack 3.12.0时间:16548ms资产大小块块名称build.js 2.15 MB 0 [emitted] [big] main build.js.map 9.74 MB 0 [emited] main –在将上述cmd运行到项目后出现文件夹–您能否指导我完成下一步工作?–
Hamendra Sunthwal

2

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

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

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

npm serve

如果您要准备网站进行生产,则可以使用

npm build

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


1

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

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

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

打开main.js并添加

Vue.config.productionTip = false;

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

npm run build

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


0

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

npm run dev

此命令用于生产版本:

npm run build

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


0

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

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


0

我认为您可以使用vue-cli

如果您使用Vue CLI以及在其部署过程中处理静态资产的后端框架,那么您要做的就是确保Vue CLI在正确的位置生成生成的文件,然后按照后端框架的部署说明进行操作。

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


您是对的,但是如被接受的答案所示,问题是关于执行哪个命令
JR Utily 18'9 /

0
  1. npm run build-这将使代码丑陋并最小化

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

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


0

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

你可以用

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


只需将dist文件夹上传到您的ftp并完成?以及如何访问服务器上的Vue应用?
Hamendra Sunthwal

0

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

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

观看此视频,该视频说明了如何在需要更多帮助的情况下使用CLI创建vue应用程序: https //www.youtube.com/watch?v=Wy9q22isx3U


0

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

npm run build

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

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

您可以在这里找到更多详细信息


0

首先在全球范围内安装Vue Cli

npm install -g @vue/cli

要创建一个新项目,请运行:

vue create project-name

运行提示

npm run serve 

Vue CLI> = 3使用相同的vue二进制文件,因此它将覆盖Vue CLI 2(vue-cli)。如果仍然需要传统的vue init功能,则可以安装全局桥:

全球Vue Init

npm install -g @vue/cli-init

vue初始化现在与vue-cli@2.x完全相同

Vue创建应用

vue init webpack my-project

运行开发人员服务器

npm run dev

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.