如何部署Vue应用程序？

Question

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

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

Vue中有相同的东西吗？

Answer 1

我想你已经创建了这样的项目:

vue init webpack myproject

好吧,现在你可以跑了

npm run build

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

Answer 2

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

vue init webpack myproject

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

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

Answer 3

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

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

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

打开你的 main.js 并添加

Vue.config.productionTip = false;

导入后立即。然后在项目文件夹中打开 cli 并运行此命令

npm run build

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

Answer 4

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

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

Answer 5

在您的终端

npm run build

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