VUE打包发布（含http-serve、Nginx服务器的部署使用）

VUE项目编写完后，怎么打包，这个不像JAVA一样直接导出jar包之类的。项目完成后保存，进入改项目路径，比如：C:\Users\MyVue

按照步骤：

第一步：事先准备环境

先给安装webpack和serve

cmd打开窗口

npm install webpack -g // 全局安装，下次项目就不用再执行这步了
或者

npm install webpack --save-dev // 项目内安装

或者

npm add webpack@latest

如果你没有装这个，num run build 你就会报错：Class extends value undefined is not a constructor or null

然后全局安装（最终要放的服务器也要有这个）：

C:\Users\MyVue> npm install -g serve

成功提示：

+ serve@11.3.2
added 78 packages from 39 contributors in 17.701s

如果不装就不能serve dist 最后发布

第二步：就是打包编译：build

进入项目种进行：

C:\Users\MyVue> npm run build

打包成功后都会有提示的，然后查看,项目上会多处dist，打开它知道里面页有index.html

 

我们发布只需要dist文件夹就行，其他的都属于原生源码的项目，不对外。

第三步：运行serve

就是发布了，只能本地运行

C:\Users\MyVue> serve dist

发布到服务器

问题来了，现在我们就是想把项目放到文件上去，不能是项目，太大，且是源码不能展示。服务器上就不用安装各种依赖、node等，因为都再项目中安装了。

我们npm run build出来的dist就是这个文件夹，拷贝这个就行了，目录结构如上图，但是打开有问题，白茫茫一片，一般都是找不到资源文件。

其一、build出来的dist中的index是不能直接打开的，打开需要部署到服务器，如：http-serve、nginx、apache、Tomcat等服务器，网上都可以下载，我用习惯http-serve、nginx。因为比较简单。

其二、是配置文件出的问题。我们build前需要检查下项目中的vue.config.js,可以module.exports = {}里加上publicPath：: "/MyVue"跟上文件名。然后再build

   

这里把dist文件夹单独拿出来，新建一个文件夹和你publicPath的名称一样就行，或者直接把dist的名称改了。

然后放到服务器中，我这里用http-serve，直接拖进去就行，选择index.html，上面就出现地址，这样就可以区域网内访问了。

官网下载：HFS ~ HTTP File Server

或者

使用业内最常用的nginx工具，相对复杂些，网上下载，我下载的版本，改个名称

第一要确认下载的能不能打开使用？网上有教程，也有修改配置文件，我这里比较简单，无需命令运行。

直接双击nginx.exe,闪了一下，你就打开浏览器，输入http://localhost就行了，然后界面显示有Nginx的内容，代表可以用。

把dist文件夹放到这个位置，因为打开找不到资源文件，我就把dist下的所有文件放到这个根目录，且还保留dist文件，这样以防万一

说明：这个index.html是dist里的，nginx下载的时候也有一个，我改名教40x.html了，被我划掉的都没有用，其他的都是dist的内容。一般正常的试：D：/nginx/html/dist（MyVue）

记得要改配置内容才可以使用，路径再conf/nginx.conf中，用记事本打开就行了。

我就改了两个地方，就是端口号，还有dist放在哪个路径，见上面。

注意：修改配置文件后，记得要先把nginx进程杀掉，重启nginx（双击nginx.exe）。

一切完毕后，打开浏览器输入：http://localhost:8090，出来的页面就是你项目的页面了。

打开经常空白，日志显示：

这个就是资源找不到，网上很多解决方案，看的很懵！总结出几点坑：

1.你的项目文件vue.config.js中添加了？ 为何添加，学习地址：https://cli.vuejs.org/zh/config/#目标浏览器

2.你build出来的dist文件内容全不全，然后你有没有命名跟上面publicPath一样？不行你就把dist中的内容放根目录。

3.选择的服务器有没有问题，有没有过去，可以用其他可行的项目测试一下。比如我用的http-serve不明原因挂了，重启都不行。所以才换了nginx服务；

4.如果使用的nginx的服务器，你的配置文件有没有问题？有没有刷新进程？你可以测试下不带项目的时候能不能打开，排除是项目本身的原因。

5.最后一点，可能你使用到的库或插件放的目录不对，build出来的dist识别不到，但是这个不可能影响整个界面，这个原因也不成立，只是你发现某个功能不能用差不多。