Vue项目打包部署到服务器（Linux）

一、打包（build）
npm run build / yarn build

打包完成后项目路径会多出一个dist文件夹

到这里本地的打包完成了
然后到服务器
二、服务器配置（nginx）
**注：如果已经有nginx环境了的话直接到第6小步**
1、查看gcc版本 gcc -v
没有的话安装

yum -y install gcc

2、pcre、pcre-devel安装
pcre是一个perl库，包括perl兼容的正则表达式库，nginx的http模块使用pcre来解析正则表达式，所以需要安装pcre库。

yum install -y pcre pcre-devel

3、zlib安装zlib库提供了很多种压缩和解压缩方式nginx使用zlib对http包的内容进行gzip，所以需要安装

yum install -y zlib zlib-devel

4、安装opensslopenssl是web安全通信的基石，如果没有openssl，我们的信息可以说都是在裸奔。。。。。。
安装命令：

yum install -y openssl openssl-devel

5、安装nginx
去到一个文件夹cd /usr/local/web
a、下载nginxwget http://nginx.org/download/nginx-1.9.9.tar.gz
b、解压压缩包tar -zxvf nginx-1.9.9.tar.gz
c、切换到cd /usr/local/web/nginx-1.9.9/下面执行三个命令：
1. ./configure
2. make
3. make install

Nginx安装成功

如果已经安装了的可以直接从第6步(这一步)开始

6、切换到nginx安装目录（默认是/usr/local/nginx）
可以执行where nginx查看

修改nginx文件夹里的nginx.conf修改默认配置，
默认配置已经够用了基本只需要修改一下端口和路径，
默认端口是80，一般都是已经被占用了的，改成其它自己需要的
然后路径是刚刚打包的dist文件的路径
最基础的配置（如果已经有其他项目在nginx里了也可以直接在http{里面再加上这一段}）

server {        listen       8080;        server_name  project1;        location / {            root   edu/dist; #dist路径           index  index.html index.htm;       }
}

7、启动nginx服务切换目录到/usr/local/nginx/sbin下面
执行./nginx启动
其它nginx命令

./nginx -s stop      #停止
./nginx -s quit     #比较安全的退出
./nginx -s reload   #刷新重启

8、查看nginx服务是否启动成功

ps -ef | grep nginx

然后开放端口（开放端口的操作这里就略啦——云服务器的去对应平台设置安全组里添加）
不出意外的话执行你的ip或者域名：10.0.xx.xx:8080就可以访问到你的项目了

接下来则可以开始进入CICD的进阶方式；实现持续部署

Vue项目打包部署到服务器（Linux）相关推荐

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项目打包部署到服务器
目录一.打包项目二.修改Nginx的配置三.部署四.开放端口号一.打包项目 1. 在 vue.config.js 文件中找到并修改,主要是publicPath 与outputDir 两项配置 ...
Vue项目打包部署到Nginx服务器步骤总结
前期准备工作: 1. 准备一台服务器: 2. 根据服务器的系统环境安装配置Nginx; 3. 了解Nginx的配置文件,了解常用的linux系统操作命令 4. 进行Vue项目的打包部署因为我只是单纯 ...
Vue.js-Day09【项目实战(附带完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
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项目打包部署到服务器（Linux）

Vue项目打包部署到服务器（Linux）相关推荐

最新文章

热门文章