精华内容
下载资源
问答
  • Linux服务器部署vue项目

    万次阅读 多人点赞 2018-09-09 20:32:52
    新建一个vue项目。 //详细的怎么创建。我这里就不说了。 vue init webpack vuetest 得到的项目目录 执行, npm run build // 进行打包操作 当最后看到这样代表打包成功 此时你可连接服务器。我这里用.....

    最近刚到新公司,正好之前没接触过这方面的东西。最初仅仅是猜想。最后也没想到Tomcat真的可以部署前端页面

     

    好,我先来。新建一个vue项目。  // 详细的怎么创建。我这里就不说了。

    vue init webpack vuetest

    得到的项目目录

    执行,

    npm run build   // 进行打包操作
    

    当最后看到这样代表打包成功

    此时你可连接服务器。我这里用的是 xshell 工具,注明:工具无所谓。链接上就可以(给小白看的)

    出现此画面,连接成功

    下载Tomcat

    各位可以选择两种方式:

        1.在Windows上下好传过去。// 自己百度传的方式。我这里不教

        2.wget 后面跟上下载路径即可

    我选择第二种

    wget http://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-7/v7.0.90/bin/apache-tomcat-7.0.90.tar.gz

    执行以上命令

    // 提醒一点。Tomcat需要Java支持。我随后会发布安装Java的教程。

    此时下载是一个tar.gz的压缩包

    tar -zxcf apache      // 后面按一个tab他会自动补全

    随后我们cd 进到目录

    此时我们到达Tomcat的bin目录中。。。接下来执行ls查看一下。当前目录下有哪些文件

    我们经常需要用到的两个文件。我已经在图中全出

    名字顾名思义  : startup.sh  // 开启的        shutdown.sh     // 关闭的

    执行sh脚本    

    bash startup.sh

    看到的是这样的字样。那么代表启动成功

    好接下来我们回到vue

    打包后。会生成一个dist目录  // 里面两个东西,一个static 文件夹    还有一个index页面   这个是vue帮助我们生成的

    文件夹xshell不支持上传。所以我这里把他打成一个压缩包

    回到Linux

    我们进入Tomcat根目录的webapps文件夹

    把刚才打压缩包的dist目录移上去

    可以看到。我的这个文件已经上来了

    然后解压他:  // 怎么解压自行百度。。  安装unzip什么的。。自己百度

    unzip dist.zip

    现在。你就可以在的浏览器上输入你的ip。

    http://xxx.xxx.xxx.xx:8080/dist/

    这个时候你的项目就可以跑通了

    不过此时你会发现一个问题。。访问以后是白屏

    解决办法:

    打开vue项目根目录的config目录

    把这两处改为   ./

    改完保存。打包,把webapps目录下的dist删掉。把这个打包过的替换上。就可以访问了。

    此章完结。。个人记录。帮助迷途中的小白。。本人技术有限。勿喷谢谢

    ===========================

    以上 项目创建方式是用vue cli2构建的项目   下方更新vue cli3修复白屏问题

    ============================

    打开这个文件。

    将这里改成 

    publicPath: '',

    再次打包就好

    展开全文
  • 打包Vue项目三.方式一:宝塔面板1. 安装宝塔面板2.一键编译安装环境3. 上传项目4.配置nginx四.方式二:Node/Express1.安装Node.js1.下载Node.js2.解压并创建软链接2.全局安装pm23.编写.js启动文件4.上传打包好的项目...

    一.环境说明

    centos8 x86 64

    二.打包Vue项目

    在这里插入图片描述

    三.方式一:宝塔面板

    1. 安装宝塔面板

    参考链接:https://www.xhxk.top/index.php/archives/26/

    yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
    

    2.一键编译安装环境

    3. 上传项目

    在这里插入图片描述

    4.配置nginx

    在这里插入图片描述
    如果是使用histroy模式,则还需要添加,否则会出现刷新空白

    location /
            {
              root /www/wwwroot/dist;
              index index.html index.html
              try_files $uri $uri/ @rewrites;
            }
            location @rewrites {
              rewrite ^(.+)$ /index.html last;
            }
    
    

    在这里插入图片描述

    然后使用ip访问即可

    四.方式二:Node/Express

    1.安装Node.js

    1.下载Node.js

    wget https://nodejs.org/dist/v12.16.3/node-v12.16.3-linux-x64.tar.xz
    

    2.解压并创建软链接

    最好不要在 /root 目录下安装,因为普通用户没有 /root 目录的访问权限,继而无法执行安装在 /root 目录下的软件,可以将下载的 Node.js 移动到别的目录下,如:/usr/local 等。

    1.移动到usr/local

    mv node-v12.16.3-linux-x64.tar.xz /usr/local
    

    2.解压并将解压目录更名为 nodejs

    cd ../usr/loacl
    tar -xvf node-v12.16.3-linux-x64.tar.xz
    mv node-v12.16.3-linux-x64 nodejs
    

    3.创建软链接,使 node 和 npm 命令全局有效

    ln -s /usr/local/nodejs/bin/node /usr/local/bin/node
    ln -s /usr/local/nodejs/bin/npm /usr/local/bin/npm
    

    4.查看一下版本

    node -v
    npm -v
    

    2.全局安装pm2

    npm install pm2 -g
    ln -s /usr/local/nodejs/lib/node_modules/pm2/bin/pm2 /usr/local/bin/pm2
    pm2 -v //查看版本
    

    如果提示 ln: failed to create symbolic link ‘/usr/local/bin/pm2’: File exists,则执行 mv /usr/local/bin/pm2 /tmp/ 删除已建立的软连接,再重新创建软连接。

    3.编写.js启动文件

    const fs = require('fs'); //文件模块
    const path = require('path'); //路径模块
    const express = require('express'); //express框架模块
    const app = express();
    const hostName = '158.247.208.208'; //ip
    const port = 8002; //端口
    
    app.use(express.static(path.resolve(__dirname, './dist'))); // 设置静态项目访问路径(此处的dist为webpack打包生成的项目文件夹名称)
    
    app.get('*', function(req, res) {
        const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8'); // 设置所有访问服务请求默认返回index.html文件
        res.send(html);
    });
    
    app.listen(port, hostName, function() {
        console.log(`服务器运行在http://${hostName}:${port}`);
    });
    

    4.上传打包好的项目到linux

    在这里插入图片描述

    5.安装依赖

    npm init -y   // 初始化项目生成 package.json
    npm i express -D  // 安装express
    systemctl stop firewalld.service // 关闭防火墙
    或者
    firewall-cmd --permanent --add-port=8002/tcp // 开启端口
    firewall-cmd --reload
    

    6.启动服务

    pm2 start index.js //
    或者
    node index.js
    

    五.参考文章

    https://www.codenong.com/cs105899662/

    https://www.jianshu.com/p/26b19e96ed4a

    https://www.xhxk.top/index.php/archives/26/

    展开全文
  • linux部署vue项目

    2020-09-11 22:25:58
    linux服务器部署vue项目 一. Linux服务器上安装nginx并且进行相关配置 检查服务器是否安装了nginx相关依赖 gcc、pcre-devel、zlib-devel、openssl-devel yum list installed | grep "gcc" rpm -qa | grep "gcc" ...

    linux服务器部署vue项目

    一. Linux服务器上安装nginx并且进行相关配置

    1. 检查服务器是否安装了nginx相关依赖 gcc、pcre-devel、zlib-devel、openssl-devel
    yum list installed | grep "gcc"
    
    rpm -qa | grep "gcc"
    
    dpkg -l | grep "gcc"
    
    1. 安装对应依赖
    yum -y install gcc pcre-devel zlib-devel openssl openssl-devel
    
    1. 下载nginx
    wget https://nginx.org/download/nginx-1.16.1.tar.gz
    
    1. 解压
    tar -zxvf nginx-1.16.1.tar.gz
    
    1. 进入nginx-1.16.1 目录
    2. 配置configure文件
    ./configure --prefix=/usr/local/nginx
    
    1. 编译
    make
    
    1. 安装
    make install
    
    1. 测试是否安装成功
    cd /usr/loca/nginx/
    
    ./sbin/nginx -t
    
    1. 启动
    cd /usr/local/nginx/sbin
    
    ./nginx
    
    1. 查看运行状态
    ps aux | grep nginx
    
    1. 停止nginx
    ./nginx –s stop
    

    二 nginx失败情况

    1. 输入服务器地址无法访问
    firewall-cmd --query-port=80/tcp 		#查看80端口
    
    • FirewallD is not running (防火墙未开启)
    systemctl start firewalld 		#开启防火墙
    
    • no (80端口未开启)
    firewall-cmd --add-port=80/tcp --permanent		#开启80端口
    
    systemctl restart firewalld		#重启防火墙
    

    2.访问主机

    • 当使用阿里云服务器的时候需要配置阿里云安全组 开放端口访问
    • 当 控制台查看80端口 提示yes 的时候 基本没问题了

    3.当返回nginx Welcome to nginx! 则配置成功

    三.部署Vue项目

    1.打包项目

    npm run build
    

    获得 dist 项目文件夹

    2.将项目上传至Linux服务器 /usr/local/webapp/

    ​ 可以使用Xshell Xftp 等工具

    3.修改Nginx的conf文件

    vim /usr/local/nginx/cong/nginx.conf
    
    #修改如下
    server {
            listen  80;
            server_name  aiprose.com; #你的域名
            include /etc/nginx/default.d/*.conf;
            index index.html index.htm index.php;
            root   /root/adminpage; #你的静态文件位置
            location / {
                    try_files $uri $uri/ @router; #防止404
                    index  index.html;
            }
            location @router {
                    rewrite ^.*$ /index.html last;
            }
        }
    

    4.使配置生效

    到 sbin目录

    ./nginx -s reload
    ./nginx -s stop
    ./nginx
    

    5.访问ip地址查看效果

    展开全文
  • 部署Vue项目Linux服务器.pdf
  • macOS的终端通过ssh远程连接Linux服务器: 首先,进入root sudo -i 显示 password:直接在password后面输入开机密码回车,输入时,密码不可见 接着输入 ssh root@+ip 这时显示 root@+ip’s password:直接在...

    Step1: macOS系统下登录Linux OS

    macOS的终端通过ssh远程连接Linux服务器:

    首先,进入root

    sudo -i
    

    显示 password:直接在password后面输入开机密码回车,输入时,密码不可见

    接着输入

    ssh root@+ip
    

    这时显示 root@+ip’s password:直接在password后面输入密码回车,同样,输入时,密码不可见

    在这里插入图片描述

    这时已经切换到linux服务器上了,然后就可以进行下一步。

    Step2: Linux 服务器下安装npm和node

    运行以下命令

    $ cd /usr/local
    $ mkdir node
    $ cd node
    $ wget https://npm.taobao.org/mirrors/node/v14.3.1/node-v14.3.1-linux-x64.tar.gz
    

    解压.tar.gz

    $ tar -zxvf node-v14.3.1-linux-x64.tar.gz
    $ pwd
    $ ls
    

    创建软链接,使node和npm命令全局有效。

    $ ln -s /usr/local/node/node-v14.13.1-linux-x64/bin/npm /usr/local/bin/npm
    $ ln -s /usr/local/node/node-v14.13.1-linux-x64/bin/node /usr/local/bin/node
    
    

    在这里插入图片描述

    在这里插入图片描述

    到这一步,npm和node配置完成,删除已经下载的.tar.gz文件
    在这里插入图片描述

    Step3: 部署Vue项目

    mac向linux远程服务端上传文件:
    打开Terminal,输入命令

    scp -r  本地文件地址 root@服务端ip: 服务端路径
    

    然后输入服务器密码 就有上传进度了

    (如果Vue项目中存在node_modules目录,应先删除掉,然后重新在服务器端部署)
    在这里插入图片描述

    上传完成后,在服务器端打开项目所在文件夹
    运行npm install,重新创建项目所需的依赖包

    如果npm install速度过慢,可以下载淘宝镜像
    用 get命令查看registry
    npm congfig get registry
    原版结果为
    http://registry.npmjs.org
    用set命令换成淘宝镜像
    npm config set registry https://registry.npm.taobao.org
    再执行命令
    npm install

    创建完成后,在项目文件夹下执行命令

    npm run serve
    

    在这里插入图片描述

    到这里,Vue就已经成功的部署到Linux服务器上咯!

    展开全文
  • 3.连接linux服务器 查看服务器外网,打开xshell连接 服务器用户名默认为root 输入密码不知道的可以去服务器面板重置 看到这样就连接成功了 4.创建项目文件夹目录 使用xftp连接服务器,这里还是一样...
  • 服务器部署vue项目

    2021-03-01 16:50:19
    1- 先将vue项目打包 在项目中执行打包命令,执行完成后文件夹中会出现一个 dist 文件夹 npm run build 2- 在Windows上安装nginx 注意是windows版本的,目的在于测试打包的项目是否能够正常显示 (1)将下载的...
  • Linux部署vue项目

    千次阅读 2019-08-19 20:11:26
    2.打包vue项目 npm run build 如果静态资源文件访问不到,这里以vue-cli 3.0为例,将vue.config.js文件下的publicPath改成如下图所示 3.复制打包完成的文件到nginx目录下 一般打包好的文件在dist/目录下,...
  • tar -xvf node-v14.15.0-linux-x64.tar.xz 配置环境变量 vim /etc/profile 往 .bash_profile 新增环境变量(在末尾) export NODEJS_HOME=/usr/local/node/node-v14.15.0-linux-x64 export PATH=
  • 说,将大象放到冰箱需要三步 ...vue项目,在本地打包以后,会生成一个dist文件夹,该文件夹下面的所有资源,就是你需要放到服务器上的文件。 本地打包后的文件夹目录: 有ftp工具 如果有ftp工具,直接使...
  • linux nginx部署vue项目 实现跨域

    千次阅读 2019-11-14 11:47:27
    最近有时间研究了下前端项目如何在nginx服务器下进行部署,折腾了两天总算有所收获,汗~~ ...说明:nginx服务器的安装及vue项目如何进行打包不在本文的讨论范围,后面的所有实践说明都是基于个人的本地服务...
  • 服务器配置 购买阿里云服务器 (选择ubuntu 16系统 / 内存2G以上) 安全策略, 入规则: 添加端口 20,21,22, 80, 443, 3306, 8080, 安装宝塔 wget -O install.sh ...
  • 本文主要讲解linux系统使用tomcat部署vue项目过程 文章目录文章目录前言一、打包前端1.打包2.上传到服务器二、运行1.启动tomcat2.访问vue三、运行异常解决办法1.访问不到的问题2.访问到空白页 前言 最近在网上找...
  • 阿里云Linux部署vue项目 阿里云Linux部署vue项目阿里云Linux部署vue项目1、安装Nginx2、把vue项目打包3、配置Nginx 1、安装Nginx 安装Nginx的方法有很多种,我是直接在宝塔面板上面软件商店安装的Nginx。 ps:宝塔...
  • 华为云服务器部署vue项目

    千次阅读 2019-10-30 23:29:23
    一、修改vue项目文件 修改项目config目录下的index.js,将assetsPublicPath: '/'改为assetsPublicPath: ‘./’,注意,有两处,都要改,不然打包部署到tomcat上面访问是一片空白;还有一点需要注意的就是,webstorm...
  • 目录连接LINUX服务器安装nginx部署vue工程 连接LINUX服务器 1.下载安装软件 **MobaXterm ** ,安装位置可任意更改 2. 打开MobaXterm ,点击session ; 3. 点击ssh; Remote host 中填写服务IP地址 Specify username ...
  • Linux服务器上如何部署前端vue项目

    万次阅读 2020-11-10 23:10:11
    1.使用宝塔面板在服务器上安装nginx 2.前端vue项目进行打包会得到dist 3.将dist文件中的内容全部复制到nginx中的html文件夹中即可! 4.然后访问域名或者服务器ip即可。
  • 项目开发完成之后我们就需要将项目上线运行供...Nginx是一款高性能、低消耗的轻量级反代理服务器很适合中小型项目,这里选择Nginx服务器部署Vue项目。打包Vue项目项目发布之前我们需要先将项目进行打包,Vue脚手...
  • linux环境nginx部署vue项目

    万次阅读 2018-09-06 11:44:21
    linux环境nginx部署vue项目 先将vue打包 上传到服务器随意目录下,进入到你上传的那个目录下 解压 unzip dist.zip (或者直接解压后再上传) 如果提示命令未找到 可能是没有安装unzip 安装unzip zip:yum ...
  • 步骤3:本地创建实例vue项目并上传到github上 步骤4:CentOS7.5安装Git,并拉取代码 步骤5:CentOS安装node环境,并编译前端项目 步骤6:将编译后的静态文件放到nginx中 步骤7:增加前端启动命令,简化流程 ...
  • Linux 下搭建Vue开发环境以及发布部署Vue项目Linux下vue环境的搭建nodejs安装cnpm安装vue-cli的安装新建一个Vue项目Vue打包部署到Linux安装nginxVue项目打包修改Nginx配置文件删除ProxyTable的配置重启nginx服务启动...
  • 需要将本地的Vue项目部署到阿里云服务器上,使得项目可以被公网访问到。 二、具体步骤 2.1 在服务器上安装node环境和Nginx服务器 Vue项目是基于node.js的,首先需要在服务器上安装node环境。直接在宝塔面板安装PM2...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,917
精华内容 2,766
关键字:

linux服务器部署vue项目

linux 订阅
vue 订阅