如何部署一个vue项目？

关键词：

【中文标题】如何部署一个vue项目？【英文标题】：How to deploy a vue project? 【发布时间】：2019-01-27 02:51:25 【问题描述】：

几个月来我一直在使用 Vue，我真的很喜欢它。我使用 webstorm 作为编辑器，它具有 Vue 和其他框架的所有预安装模板，使用 Vue 进行开发非常有趣。无论如何，当我决定在 Heroku 上部署应用程序时，它不起作用。当我在本地机器上运行该项目时，它工作正常，但是当我在 Heroku 上部署时，我得到一个空页面。我搜索了解决方案，发现应该有一些我从未拥有过的dist 文件夹，即使在我的本地机器上我也找不到这个文件夹。现在，我有这些文件夹：

我的问题，我是否必须创建 DIST 文件夹并将 index.html 和其他一些文件移到那里？我是否必须运行 npm 构建（我做了，但实际上什么也没发生）。这是我的 p.json：

"scripts": 
        "postinstall": "npm install express",
        "start": "node server.js"
,
      "dependencies": 
        "vue": "^2.5.2"
,

那么我做错了什么以及如何使我的应用程序正常工作？ 谢谢

【问题讨论】：

构建中有什么？听起来你期待魔法发生只是因为它的 vue，你使用什么构建/捆绑工具？什么在服务器等等 npm run build，另见vuejs.org/v2/guide/deployment.html 你在使用这些 Vue 模板吗？ github.com/vuejs-templates 我并不期待任何魔法发生，我只是想知道如何在线部署应用程序。不知何故，在我的机器上，当我运行 npm run 时它工作正常，但是当我推送到 Heroku 时，我有一个空页面。我已经尝试过 npm run 构建，但它什么也没做。 我猜想用命令行而不是编辑器创建 Vue 项目的最佳方式。我只是按照这个答案，我有我需要的how-to-deploy-vue-app 【参考方案1】：

您需要创建最终版本。如果您使用 cli vue 版本 3，则可以使用命令 vue-cli-service build。 链接：https://cli.vuejs.org/guide/build-targets.html#library

构建项目后，您可以下载heroky（或例如surge.sh）中的文件夹dist并在线访问您的站点。

祝你好运。

【讨论】：

使用 vue cli webpack 后如何部署 Vue 应用

】使用vuecliwebpack后如何部署Vue应用【英文标题】：HowtodeployaVueappafterusingvuecliwebpack【发布时间】：2018-01-2601:38:22【问题描述】：我最近创建了一个希望在互联网上部署的Vue应用程序。但是，我只能使用node打开项目并运行npmrundev... 查看详情

如何使用docker部署vue项目

...ker镜像内编译的话如果出现错误是不好定位问题的。那么如何实现docker部署vue项目呢，操作如下参考：文件目录如下：在vueProject根目录下新建Dockerfile文件，注意没有后缀，nginx镜像默认服务器的目录在/usr/share/nginx/html，内容如... 查看详情

多个vue项目如何部署到服务器(代码片段)

...面有平台端和商家端以及用户端，那么这么多Vue项目如何部署到服务器呢？二、部署（1）首先在本地测试项目可以启动并且能正常运行。（2）在项目中输入npmrunbuild 此时会生成一个文件（3）在服... 查看详情

vue+springboot前后端分离如何部署项目？

最简单办法，vue编译完后的文件放到后端容器内参考技术A直接上代码GitHub 参考技术Bhttps://blog.csdn.net/u013810234/article/details/89376466https://blog.csdn.net/u013810234/article/details/89392732 查看详情

githubactions简单部署一个vue/react项目

大体介绍本文对githubactions部署前端项目做一个简单的总结，总体来说，我感觉用它想要部署一个前端项目，可以说非常简单，简单得令人震惊??。但是高度的封装，会让人没有那种以前travis书写shell的畅快体验感。不过这也是gith... 查看详情

docker部署前端项目(vue)(代码片段)

...境、代码、配置文件等打包到这个容器中然后发布应用。如何安装安装docker以及一些问题参考博主其它文章最好安装一个dockerdesktop(这样就不用记命名敲)项目目录babel.config.jsdistDockerfileindex.htmlNginx.confnode_modulespackage.jsonpublicREADME.m... 查看详情

如何在linux服务器上部署vue项目(代码片段)

1.在本地将Vue项目打包以项目运行在vscode为例，在调试窗口输入 npmrunbuild待命令执行完毕之后，在项目目录下会生成dist文件夹，如下图 2.创建一个运行文件，名字是：server.js server.js中的内容如下：constexpress=require(\'exp... 查看详情

docker项目部署(代码片段)

docker项目部署1.vue项目docker部署linux如何查看当前目录的完整路径安装nginx镜像vue项目打包docker部署方式一：挂载（适用于要经常修改的情况）docker部署方式二：COPY（适用于修改少的情况）1.vue项目docker部署... 查看详情

如何在nginx下部署vue项目(代码片段)

首先我们使用npmrunbuild来生成项目的静态页面，会在项目的根路径的dist目录下我们将dist下的index.html和static静态文件发布到服务器的某一目录下比如说我们发布的是在usr/local/vue/page下，那么我们对于nginx的配置如下在/usr/lo... 查看详情

nginx线上部署多个vue项目(路径区分)(代码片段)

Nginx线上部署多个Vue项目(路径区分)nginx多静态文件部署。我个人博客项目占用了nginx根路径，而我只有一个域名，也不准备用二级域名了，所以就直接用路径区分开。一个域名，只部署一个静态文件服务，那很简单，只用把打包... 查看详情

nginx部署vue项目

...通过部署vue-element-admin后台管理项目来通俗易懂的教大家如何使用Nginx快速部署Vue项目vue-element-admin项目地址https://gitee.com/mirrors/vue-element-admin?_from=gitee_search注意这里一定要上传到Nginx的目录下面！！！！！！！！！！！！！！！... 查看详情

vue项目部署上线

...bsp; 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程。参考了很多的文档,终于成功进行了部署。在这里将服务器的搭建和vue项目的部署上线进行整理(都是基础的知识,希望对大家有帮助。对我帮助是很大的)2.... 查看详情

小白研究项目部署-关于vue项目部署遇到的一些问题

...户和其他人看到，并且测试环境会尽量与生产环境相似。如何区分生产环境和开发环境？process.env.NODE_ENV是node的全局变量process的一个属性，它的作用是区分当前环境是生产环境还是开发环境，可以参考学习：理解webpack中的process... 查看详情

Vue.js 项目部署

】Vue.js项目部署【英文标题】：Vue.jsprogectdeploying【发布时间】：2021-11-2019:56:29【问题描述】：每次上传照片时，我是否必须更改所有照片的轨道（路径）、php文件路径和db连接文件vue.js项目到真实服务器？有没有更简单或更快的... 查看详情

vue项目打包后，乱码。部署到本地服务器，不乱码，部署到虚拟机linux服务器乱码。如何解决？

...到本地服务器，不乱码，部署到虚拟机linux服务器乱码。如何解决？在本地没有打包之前运行正常，打包后，放到127.0.0.1本地服务器，可以正常访问，但到linux服务器就乱码。问题是都是utf8,服务器也是。而且之前的网站都正常，... 查看详情

如何生成 Vue.js CLI 站点的部署版本？

】如何生成Vue.jsCLI站点的部署版本？【英文标题】：HowtoproducedeploymentversionofaVue.jsCLIsite?【发布时间】：2018-03-0215:59:39【问题描述】：我已经设置了一个Vue.jsCLI项目我运行了npmrundev，它在我的浏览器中的8080端口运行我对网站做了... 查看详情

vue项目部署（nginx）(代码片段)

本文记录如何将做好的Vue项目部署到服务器上，需要准备：linux系统的服务器或者虚拟机Vue项目打包Nginx服务器的配置和部署1、linux系统准备本次使用云主机作为部署主机。 2、Vue项目打包切换到项目所在目录，使用np... 查看详情

项目部署vue+springboot前后分离个人博客项目实战部署保姆教程linux+docker安装部署启动一条龙教程(代码片段)

...程技术栈系统环境需求后端部署步骤redis配置前端域名从如何拥有个人服务器和域名开始说起。在职程序员教你如何选择个人服务器和个人域名，让自己变得IT极客范【手把手教程】个人域名如何备案阿里云ICP网站备案SpringBoo... 查看详情