vue 搭建一个本地服务器运行打包后dist文件

npm有时候很慢，可换cnpm（安装）较快，或者npm配置为淘宝镜像

运行后会出现访问ip，如下

浏览器输入以上的ip即可预览

在我们通过Vue-cli开发的项目，如何部署到服务中，能够使得别人也能访问我们写的项目呢，其 *** 作与部署网页到服务器类似，其 *** 作可参考 部署网页到服务器 ，也可跟着我往下一步一步的进行。

将打包好的dist文件上传到Nginx安装目录下的test/test1下（ 目录可随意 ），效果如下图所示：
在Nginx安装目录下，通过以下命令启动Nginx：

至此，在服务器中部署Vue项目已经完成了，即可以通过ip或域名访问了，效果如下所示：

如果Nginx是已经启动的，可通过以下命令重启Nginx：

可通过以下命令查看Nginx是否启动成功

希望能帮到你，不要忘了点个赞哟！

前言：
有这样一个需求，需要在多个不同的服务器下部署同一个前端项目，（正常 *** 作是每一台服务器都根据不同的IP地址build一个包依次部署，非常繁琐，因此简化为多个环境只需要用打一个包即可）

解决方案：首先需要服务器设置系统环境变量，在打包后部署到服务器，通过运行sh文件来获取环境变量set到项目中

以下是vue项目为例， React ，Angular 均可以使用

1，在项目根目录创建 runsh 文件

注解：
第一行 apiUrl为当前系统配置的系统环境变量名称
第二行 将获取到的ip地址赋值到打包后的dist文件下indexhtml下的body中

2，项目中使用

3，将打包后的dist文件上传到服务器后，运行 runsh，运行完成，页面就可以正常请求啦~

运行命令如下，也可手动运行

重要：需要在部署的服务器提前配置系统环境变量API_URL，否则获取不到

路由mode变为history后，需要在服务器配置 url重写,在根目录 创建webconfig文件 加下面内容复制进去

例如我在根目录下创建子目录名为app的文件夹作为项目文件夹
路由mode变为history后，需要在服务器配置 url重写,在根目录 创建webconfig文件 加下面内容复制进去 与根目录不同的是 action 标签 url /app/indexhtml

config indexjs文件下 build对象中publicPatch 从默认的 / 改成 自己部署的 子目录名称 /app/

routerjs 需要改下 base 根据不同的打包环境 dev 默认就是 / pro需要根据项目路径

总结：
history模式，本地运行 肯定是在根目录 127001:xxxx/# 使用上面根目录方法
打包发到生产环境，视情况使用

根目录和子目录 有些相同的引入方法

建议 直接使用相同的方法 同时适应根目录和子目录 部署

一、将vue项目进行打包编译后，根目录生成dist的文件

当出现如上图显示时，说明打包编译完成，已经生成dist文件

二、打开iis服务器
打开iis服务器后选中网站后右击选添加网站，就可对网站进行配置，物理路径选择编译后的dist文件夹后选确定就行。

三、右击选择启动后出现如下报错信息：
除非Windows Activation Service (WAS)和万维网发布服务(W3SVC)均处于运行状态，否则无法启动网站

解决：
打开命令提示符中输入servicesmsc ,打开服务。
找到windows install及word wide web发布服务选项，分别右击启动，并右键属性改为启动类型就可以。

这是重新启动下，就可以访问。

    我们的前端项目一般在打包时就会将服务器域名或者ip配置好，在打包生成的文件直接部署到对应服务器就行了。但是公司的项目要求可以部署私有云或者局域网内，项目的ip地址可能是动态变化的，或者说不同的局域网内ip不是不同的，因此要实现可以让工程人员去修改访问的服务器ip来做到一次打包多处使用的效果。
    当然，这样做在我们看来是有一定风险的，会暴露出一些东西，存在一定的危险，同样也提供了一定的便捷性（说白了就是，如果不这样实现，现场售后服务人员会骂娘，因为每个项目都要打包一次，领导呢会感觉，‘ 你个垃圾，就这都不能实现，怎么可能，解释那么多，不就是做不出来，垃圾 ’）。
    综上，我这里对公司项目进行了相关实现，其实挺简单的，如下：

1，在根目录下的public目录中添加configjs文件，内容如下：

项目打包的时候会将该文件拷贝到打包文件的根目录中。
2，配置封装的axios，我的axios封装在requestjs文件中，这里我节选了需要添加和修改的地方

3，将configjs文件在indexhtml文件中引入

---