在服务器中使用Nginx部署打包的Vue项目

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

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

在Nginx安装目录下，通过以下命令启动Nginx：

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

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

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

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

刚开始学vue框架，公司要求项目打包的时候把服务器的ip地址单独留一个接口，方便后期商家可以自行配置自己的服务器地址。

解决办法：

1、新建一个js文件用于保存服务器的ip地址，将当前ip存入window对象，内容如下：

2、在webpack配置文件中找到plugins选项，配置插件：

3、在index.html文件中以script标签形式引入server.js(保存ip)文件，注意在打包的时候开发环境和生产环境的路径问题：

4、在main.js中将ip添加到vue原型中：Vue.prototype.ip = window.ip

5、最后在需要调用 的地方直接使用this.ip即可。

6、打包之后的目录结构，如果服务器的ip地址发生了变化，可直接修改server.js文件，然后保存。

1.第一步

然后会生成一个dist目录的文件夹

2.将dist文件夹拎出来，我本地已经打好localhost服务器，使用IIs搭建的，如果想输入： localhost:8001/project 打开文件，需要在index.js文件配置：

如何让vue项目然后通过ip地址访问，需要在package.json配置项加个 --host 0.0.0.0

3.

build/webpack.prod.conf.js

config/index.js

4.重复第一步npm run build

因为这边我是本地搭建的服务器，菜菜的我不会写接口，只能模拟了，我这边是在服务器指定文件夹下建了个api文件夹，里面放对应的json文件，如果是团队开发，只要把dist文件扔给后端，后端会写好接口的，嗯就这样

5.运行结果对比

6.进一步优化

当项目日趋庞大，打包后的app.js会越大，-----异步组件加载

---