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

Question

使用vue-cli开发 Vue 应用后，我该怎么办？

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

Vue 中有相同的内容吗？

Answer 1

我认为你已经创建了这样的项目：

before_action

好吧，现在你可以运行

了

vue init webpack myproject

将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

在您的终端

npm run build

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

Answer 4

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

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

Answer 5

对于NPM => npm运行构建对于Yarn =>纱线运行构建

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

Answer 6

要将您的应用程序部署到产品环境中，请添加

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

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

打开您的main.js并添加

Vue.config.productionTip = false;

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

npm run build

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

Answer 7

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

npm run build

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

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

您可以找到有关此here

的更多详细信息

Answer 8

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

您只能使用

在命令行中

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

Answer 9

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

npm run build

Answer 10

首先在全球范围内安装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初始化功能，则可以安装全局网桥：

全局Vue初始化

npm install -g @vue/cli-init

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

Vue创建应用

vue init webpack my-project

运行开发者服务器

npm run dev

Answer 11

这是用于部署到自定义文件夹（如果您希望自己的应用程序不是root用户，例如 URL / myApp /）-我花了很长时间找到这个答案...希望对别人有帮助。

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

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

Answer 12

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

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

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

进行测试

npm serve

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

npm build

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

Answer 13

如果您要构建并发送到远程服务器，则可以使用cli-service（https://cli.vuejs.org/guide/cli-service.html），您可以创建任务来进行服务，构建以及使用"parsedquery":"+(title:hom content:perfekt)~2 ()"的某些特定插件进行部署< / p>

Answer 14

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

Answer 15

我认为您可以使用vue-cli

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

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

Answer 16

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

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

Answer 17

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

npm run dev

此命令用于生产构建：

npm run build

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

Answer 18

有时仅使用You are running Vue in development mode. Make sure to turn on production mode when deploying for production.进行部署时，您会看到npm run build。

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

如何部署Vue应用程序？

18 个答案:

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