vue如何将项目部署到服务器上并且使外网能够访问到

你的服务器是什么系统啊 ，，，linux LINUX、WINDOWS、NETWARE、UNIX。。

在linux

首先服务器安装node git   nginx  vue-cli

安装好nginx 用你的公网ip访问就可以看到 下面的页面

然后进入到下面的路径

vi default 你会看到nginx的默认配置

默认监听80端口 根路径

把你写好的vue项目 上传到github ，通过git clone 克隆到

服务器

路径下面

然后npm/yarn add/install 安装依赖 然后npm run build

vi 打开html 下面的 indexhtml 可以看到

nginx默认的html

进入sites-enabled 发现 它里面的 default 来自 sites-available的default

所以需要在 sites-available 新建一个文件 你的项目名命名就可以

在你新建的文件

我在site-available新建的文件是note-admin 映射到 sites-enables

注意路径一定要写全

最后重新加载下 nginx -s reload

打开浏览器 公网ip:端口号  或者 域名访问

这就可以了

还有 用express 部署这个 简单些

既然是布署，哪默认就应该是生产环境下的布署，vue开发的应用本质上就是静态文件,无论你用何种web服务器，放上去就应该能通过http访问

接下来我来帮大家来捋一捋

首先VUE 是一个javascript的前端框架，注定了它是运行在浏览器里的，对服务器本地没有任何要求，只要一个静态文件服务器能通过http访问到其资源文件就足矣！无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器，也用不了多少行代码。

npm run dev 是用来在本地开发的时候做调试用的，vue开发的是前端的东西，不是nodejs 服务端程序，按道理讲，生产环境里就不该存在npm，甚至nodejs也不需要（用nodejs来做web静态服务的除外），楼主通过ssh进入到服务器里，再运行npm run dev 来启动哪是开发机上做的事情。正确的做法很简单，通过npm run build 把生成的dist文件夹（不要上传文件夹）里的内容上传到http服务器上就可以通过 http来访问了，开发机上正常，上传以后 程序出现错误不能运行的原因9999%的可能性是你引用资源的路径有问题。

一般如果vue框架的程序上传到网站服务器的根目录下是不 会有问题的，也不存在资源文件引用错误的情况，但如果你不是根目录，就会有问题，通过vue-cli 生成的开发目录，build以后默认引用资源文件的路径是

有更多疑问 ”可以咨询 ”小鸟云，它是的一家服务器厂商，我一直在用他们产品！

之前用Vue做了一个登录系统的项目，使用npm run build命令进行打包，经过vue-cli30版本的优化，打包后的dist文件夹体积非常小，我的才200K左右，可以看出Vue打包的优化十分不错，但是直接打开indexhtml是无法看到内容的，因为无法加载其中的内容，所以必须使用服务器来打开网页，我笔记本上装了express，所以就使用express来查看这个项目，介于有的朋友刚学Vue对于build打包后如何查看网页这点有疑问，我就给出解决办法：

1全局安装express-generator生成器。

express-generator是express新版本分离出来的命令工具，想要使用express命令必须装这个依赖。

npm install express-generator -g // 也可使用cnpm比较快

2创建一个express项目。

express expressName // expressName是项目名

3进入项目目录，安装相关项目依赖。

cd expressName

npm install // 或cnpm install

4将Vue build后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面，然后运行  npm start 来启动express项目。

5打开浏览器，输入localhost:3000就可以看到效果了。

备注：这个3000是你自己设置的端口号，如果你设置888，那么你就要输入localhost:888。

但打包完后有时候点击indexhtml，通过浏览器运行，出现以下报错，如图：

1、查看packagejs文件的scripts命令

2、打开webpackdevconfjs文件，找到publicPath: configdevassetsPublicPath,按Ctrl点击，跳转到indexjs文件

3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: '/',即“/”前加点。

4、终端运行 npm run build 即可。

此时点击indexhtml，通过浏览器运行便，会发现动态绑定的static的找不到，故static必须使用绝对路径。将路径修改为绝对路径，至此，打包完成。

还有什么问题大家可以留言，我能帮忙解决的会第一时间回复。

1 前言

vue-cli 一个简单的构建Vuejs项目的命令行界面

整体过程：

$ npm install -g vue-cli   $ vue init webpack vue-admin   $ cd vue-admin   $ npm install   $ npm run dev

后面分步说明。

2 安装

前提条件，Nodejs >=4x版本，建议使用6x版本。npm版本 > 3x

全局安装vue-cli

$ npm install -g vue-cli

3 使用

$ vue init <template-name> <project-name>

vue官方提供了多个打包工具版本的模版。我们可以使用vue list命令查看，当前可以使用的模版。

$ vue list

我们在这里，使用webpack模版。 功能齐全的webpack & vue-loader 提供热加载、代码检查、单元测试和css分离

$ vue init webpack vue-element-admin

之后，在E：\project文件夹下面，会有刚初始化的构建的项目vue-element-admin

4 运行结果

项目基础结构已经搭建好了，现在来启动它。

进入项目文件:

$ cd vue-element-admin

安装依赖：

中国行情原因，直接安装，有时候会失败。我们一般使用npm的淘宝镜像cnpm。

先安装cnpm：

$ npm install -g cnpm --registry=https://registrynpmtaobaoorg

之后，使用:

$ cnpm install

你直接安装也可以的：

$ npm install

运行：

$ npm run dev

启动之后，自动打开默认浏览器

之后，就可以进行本地开发，实时预览开发效果。

5 打包部署

项目开发完成之后，可以使用npm run build进行打包工作

$ npm run build

打包完成之后，会生成dist文件夹，项目上线时候，只需要将dist文件夹放到服务器就行了。

6 项目结构

第一步配置 vueconfigjs

第二步修改路由，改为 hash模式

第三步文件打包,执行以下，目录中会出现一个dist文件夹，将文件拖到服务器的 root 文件夹中

第四步可以通过域名进行访问 http://wwwlinlinrun/my-project/indexhtml#/home

我们知道使用webpack打包vue项目后会生成一个dist文件夹，dist文件夹下有html文件和其他css、js以及等，那么打包后的文件该如何正确运行呢？

倘若直接打开html文件，会报如下错误：

那么该如何运行呢？其实可以将生成的dist文件部署到express服务器上运行。

（1）、安装express-generator生成器。

npm install express-generator -g // 也可使用cnpm比较快

（2）、创建一个express项目。

express expressName // expressName是项目名

（3）、进入项目目录，安装相关项目依赖。

cd expressName

npm install // 或cnpm install

（4）、此时生成的项目目录应该是这样的：

（5）、将dist文件夹下的所有文件复制到express项目的publick文件夹下面，然后运行npm start来启动express项目。

（6）、打开浏览器，输入localhost:3000就可以看到效果了。例如我的是这样的：

总结

以上所述是小编给大家介绍的使用webpack打包后的vue项目如何正确运行（express），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！