如何部署Vue应用程序?

vue.js Vue.js

凯理查德

2020-03-09

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

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

Vue是否有相同的东西

第376篇《如何部署Vue应用程序?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

14个回答
Mandy小卤蛋凯 2020.03.09

有时,您可以You are running Vue in development mode. Make sure to turn on production mode when deploying for production.在使用simple进行部署时看到npm run build

要将其部署到生产环境中,您应该Vue.config.productionTip = false在其中main.js

A逆天猿 2020.03.09

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

米亚逆天 2020.03.09
  1. npm run build-这将使代码变得丑陋并最小化

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

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

泡芙神无伽罗 2020.03.09

我认为您可以使用vue-cli

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

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

逆天卡卡西 2020.03.09

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

npm run dev

此命令用于生产版本:

npm run build

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

卡卡西Stafan 2020.03.09

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

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

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

打开main.js并添加

Vue.config.productionTip = false;

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

npm run build

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

Mandy神乐 2020.03.09

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

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

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

6的不行 2020.03.09

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

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

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

npm serve

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

npm build

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

乐逆天 2020.03.09

在您的终端

npm run build

并托管dist文件夹。有关更多信息, 请参见此视频

小小MandyGil 2020.03.09

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

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

路易卡卡西 2020.03.09

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

vue init webpack myproject

好了,现在您可以运行

npm run build

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

乐米亚 2020.03.09

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

你可以用

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

梅Jim 2020.03.09

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

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

NearGreen 2020.03.09

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

vue init webpack myproject

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

NODE_ENV=production npm run build

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

如果要使用Docker进行部署,则需要一台用于服务dist/目录的快速服务器

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android