一、打包项目

二、修改Nginx的配置

三、部署

四、开放端口号

一、打包项目

1. 在 vue.config.js 文件中找到并修改，主要是publicPath 与outputDir 两项配置，若项目中有baseUrl,替换为publicPath （baseUrl, vue cli 3.3 已弃用）

 module.exports = {// 基本路径publicPath: './',// 输出文件目录outputDir: 'dist',// webpack-dev-server 相关配置devServer: {port: 8888}}

2. 修改完成之后就可以进行打包了，在package.json文件找到下图中的打包命令，如下例打包命令是npm run build:prod

3. 在控制台终端输入该命令，出现下图就成功了，如果build出错试一下命令 npm install script-ext-html-webpack-plugin 。

4. 打包完成之后项目中会生成一个dist文件夹，直接访问里面的index.html就可以

二、修改Nginx的配置

1. 找到http下的server，修改Nginx的代理端口号listen配置，如8888，修改项目的存放地址location的root配置为存放dist的位置，server_name改为你的电脑ip(打开cmd输入ipconfig找到)

2. 配置完成后，去启动你的nginx(打开cmd，cd进入nginx安装目录，输入start nginx/start nginx启动nginx )，然后访问就可以了。

3. nginx停止命令：nginx -s quit/stop nginx重启命令： nginx -s reload

4. 启动：直接点击Nginx目录下的nginx.exe 或者 cmd运行start nginx

三、部署

1. WIN+R打开运行，输入mstsc，点击确定

2. 远程桌面连接：输入远程地址ip、密码、远程设备的名称等，连接

3. 将刚打包好的dist文件压缩成ZIP、RAR等格式的包，之后要实现在远程桌面中拿到主机的压缩后的dist文件，

（1）关掉远程桌面，WIN+R，输入mstsc,回车

（2）点击‘本地资源’-‘详细信息’

（3）勾选中放置dist压缩包的盘，点击确定，然后点击连接

（4）接上远程服务器后，就可以在远程桌面中的‘我的电脑’，访问到刚刚勾选的本地磁盘了，如下图。

（5）然后就可以将磁盘中的dist压缩包复制到指定位置，然后解压部署了，部署完成后就可以退出远程了，然后在浏览器上输入你刚刚的服务器地址IP进行线上测试（记得开放你的端口号）。

四、开放端口号

1. 打开防火墙

2. 高级设置

3. 入站规则——新建规则

4. 端口——下一步

5. 如图选择——输入开放端口号（输入你的项目端口号）

6. 允许连接

7. 下一步

8. 输入名称

9. 看到已开放的端口

vue项目打包部署到服务器相关推荐

vue项目打包部署到服务器,Vue项目打包部署到apache服务器的方法步骤
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...
vue项目打包部署到服务器上后页面404问题
vue路由配置: const router = new VueRouter({base: process.env.BASE_URL,//hash模式下部署到服务器访问没问题,history就不行,需要 ...
Vue项目打包部署到服务器（Linux）
一.打包(build) npm run build / yarn build 打包完成后项目路径会多出一个dist文件夹到这里本地的打包完成了然后到服务器二.服务器配置(nginx) **注:如 ...
Vue.js-Day09【项目实战(附带完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
Vue项目打包部署到Nginx服务器步骤总结
前期准备工作: 1. 准备一台服务器: 2. 根据服务器的系统环境安装配置Nginx; 3. 了解Nginx的配置文件,了解常用的linux系统操作命令 4. 进行Vue项目的打包部署因为我只是单纯 ...
Vue项目打包部署总结
由于之前对前端部署上线这一套不清楚,所以这次通过查找多方资料总结一下.使用Vue作先后端分离项目时,一般前端是单独部署,用户访问的也是前端项目地址,所以前端开发人员颇有必要熟悉一下项目部署的流程与各种 ...
Vue 项目打包部署实战完整流程总结!
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了. Vue项目打包部署本身不复杂,不过一些前端同学可能 ...
vue项目打包部署流程
vue项目打包部署流程一.打包二.部署三.部署多个项目一.打包 (可选)去除打包后会生成的map文件:在vue.config.js中添加productionSourceMap: false, ...
vue项目打包部署-----解决打包后访问资源失败问题
vue项目打包部署-----解决打包后访问资源失败问题参考文章: (1)vue项目打包部署-----解决打包后访问资源失败问题 (2)https://www.cnblogs.com/ycsc/p/1 ...

vue项目打包部署到服务器

一、打包项目

二、修改Nginx的配置

三、部署

四、开放端口号

vue项目打包部署到服务器相关推荐

最新文章

热门文章