部署vue项目到Linux服务器

举报
Studying-swz 发表于 2022/08/10 22:34:26 2022/08/10
【摘要】 文章目录 方法一(node.js作为服务器)方法二(tomcat) vue-cli构建vue3项目,将项目上传到Linux服务器,服务器安装node,并启动vue项目 方法一(n...

vue-cli构建vue3项目,将项目上传到Linux服务器,服务器安装node,并启动vue项目

方法一(node.js作为服务器)

  • 将本地可以运行的项目进行全部打包,上传到服务器

  • linux服务器安装node.js

    • 下载node压缩包,在哪条路径下执行该命令,就会下载到哪条路径下:

        wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1-linux-x64.tar.gz
      
            
           
      • 1
    • 将压缩包剪切到/usr/local/bin/路径下,并解压 :

       cp ./node-v12.16.1-linux-x64.tar.gz  /usr/local/bin
       tar -xvf node-v12.16.1-linux-x64.tar.gz     
      
            
           
      • 1
      • 2
    • 修改文件夹名称为NodeJs :

        mv node-v12.16.1-linux-x64 NodeJs  
      
            
           
      • 1
    • 安装gcc

      yum install gcc gcc-c++    
      
            
           
      • 1
    • 在/usr/local/bin/NodeJs/bin路径下有三个文件:node npm npx

      • 为这三个文件设置软连接,/usr/bin目录用于存放系统命令,此时在任意路径下执行:node 相当于是执行/usr/local/bin/NodeJs/bin/node路径下的文件,执行node后会进入node环境
          ln -s /usr/local/bin/NodeJs/bin/node /usr/bin/node         
          ln -s /usr/local/bin/NodeJs/bin/npm /usr/bin/npm          
          ln -s /usr/local/bin/NodeJs/bin/npx /usr/bin/npx  
        
                
               
        • 1
        • 2
        • 3
    • 进入根目录

      cd
      
            
           
      • 1
    • 验证

       node
      
            
           
      • 1

      在这里插入图片描述

  • 编译运行vue项目

    • 进入vue项目的根目录

      cd /home/swz/vueblog_vue
      
            
           
      • 1
    • 安装依赖

        npm install
      
            
           
      • 1
    • 编译打包

       npm run build
      
            
           
      • 1
    • 后台启动项目

        nohup npm run serve >blog.txt & exit
      
            
           
      • 1

问题1:其中nohup后台运行的时候,当关闭xshell时,后台程序自动关闭?

  • 需要配置nohup环境变量

    1,查询nohup位置:
    which nohup
    2,修改环境变量,如下图,添加/usr/bin
    vi ~/.bash_profile
    3.刷新
    source ~/.bash_profile
    
        
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述
    在这里插入图片描述

方法二(tomcat)

参考连接:
https://www.cnblogs.com/chniny/p/15614017.html

文章来源: blog.csdn.net,作者:Studying_swz,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/qq_37534947/article/details/125231194

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。