在Linux服务器上部署vue项目

案例一

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

首先本地有一个vue项目,启动后可正常访问

本地打包后,也可直接访问

若打包后的index.html页面显示空白,需在项目的根路径下新建vue.config.js,再重新打包,参考

Linux服务器安装nodejs,参考

# 下载node压缩包,在哪条路径下执行该命令,就会下载到哪条路径下
  wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1-linux-x64.tar.gz
# 将压缩包剪切到/usr/local/bin/路径下,并解压
  tar -xvf node-v12.16.1-linux-x64.tar.gz
# 修改文件夹名称为NodeJs
  mv node-v12.16.1-linux-x64 NodeJs
# 安装gcc
  yum install gcc gcc-c++
# 在/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
# 进入根目录
  cd
# 验证
  node

将vue项目上传到Linux服务器,编译运行

# 进入vue项目的根目录
  cd /home/web
# 安装依赖
  npm install
# 编译打包
  npm run build
# 启动项目
  npm run serve

测试

错误总结

在Linux服务器上编译项目时报错如下,说明node版本过低,参考

在Linux服务器上编译项目时报错如下,说明node版本17.1.0过高

解决方案,参考

# 若之前使用yum安装的node,需卸载后重新安装,安装步骤参考本篇博客中使用`源码包`的方法安装
# 卸载nodejs
  yum remove nodejs npm -y
# 进入 /usr/local/lib 删除所有 node 和 node_modules文件夹
# 进入 /usr/local/include 删除所有 node 和 node_modules 文件夹
# 进入 /usr/local/bin 删除 node 的可执行文件

若编译、启动项目时报错权限不足

解决方案

# 将指定文件设置权限
  chmod 777 /home/web/xxx

运行项目时报错:warnings potentially fixable with the --fix option

解决方案,将项目中package.json中"lint": "vue-cli-service lint" 修改为:eslint --fix --ext .js,.vue src

参考

案例二

vue-cli构建vue3项目,打包后将dist文件放到tomcat上

Linux服务器安装tomcat

# 用docker拉取tomcat容器
  docker pull tomcat
# 后台启动
  docker run -d -p 8080:8080 tomcat
# 启动后浏览器访问 http://192.168.0.102:8080/ 返回404
# 解决方案:
# 对外开放8080端口
  firewall-cmd --zone=public --add-port=8080/tcp --permanent
# 重启防火墙生效
  firewall-cmd --reload
# 进入tomcat容器
  docker exec -it 正在运行的容器id /bin/bash
# 将webapps.dist目录下的所有文件复制到webapps路径下
  cp -r webapps.dist/* ./webapps
# 删除webapps.dist目录
  rm -rf webapps.dist
# 此时能通过浏览器访问到tomcat页面了,但tomcat镜像重启后依旧404,需将当前修改后的容器提交为一个新的镜像
# 不停止容器的情况下退出
  ctrl + p + q
# 在容器运行状态下提交自定义的容器,tomcat10:10.1是我自定义的镜像名称和版本号
  docker commit -a="作者" -m="备注" 正在运行的容器id tomcat10:10.1
# 停止当前tomcat容器
  docker stop 正在运行的容器id
# 删除该容器
  docker rm 运行后的容器id
# 启动自己提交的镜像
  docker run -d -p 8080:8080 tomcat10:10.1         

# 补充
# 启动tomcat镜像的时候报错:driver failed programming external connectivity on endpoint quirky_allen
# 错误原因:之前启动后端项目时占用了8080端口,需将后端项目结束

# 测试,访问 http://192.168.0.102:8080 看到tomcat页面说明启动成功

将打包后的项目放到tomcat容器

# 创建共享文件夹
  mkdir -p /home/mydocker/mytomcat8080/data
# 启动容器8080:
  docker run \
  -p 8080:8080 \
  --name my-tomcat8080 \
  -v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \
  -d \
  tomcat10:10.1
# 启动容器时报错:docker: invalid reference format.
# 错误原因:docker命令写错了,我这里是-v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \  冒号后面多了一个空格
# 进入vue项目根目录,打包后生成dist文件夹,这里我们还是使用案例一中的项目
  npm install
  npm run bulid
# 将打包后的文件复制到tomcat
  mv dist /home/mydocker/mytomcat8080/data
# 重启tomcat容器
  docker restart tomcat容器id
# 测试,本地访问 http://192.168.0.102:8080/dist/

到此这篇关于在Linux服务器上部署vue项目的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue3.0报错Cannot find module ‘worker_threads‘的解决办法

     记录一下vue3.0的第一次尝试,启动项目的时候报错Cannot find module 'worker_threads',查了一下发现是因为个人电脑node版本太低,查看了一下版本 node -v v11.2.0 然后升级一下自己的node版本再执行启动命令就OK了 npm install -g n (mac记得加sudo) n latest 总结:需要把node.js升级到版本12以上,就可以解决vue3.0报错Cannot find module 'worker_threads'的问题了

  • vue.js打包项目后页面出现空白的解决办法

    相信很多刚刚接触vue的伙伴会遇到这样的问题,就是说vue项目在开发环境下一切正常,但是打包之后,打开index.html页面却是一片空白,打开控制台发现这样的错误 出现这种情况要分两个处理方式(vue-cli2和vue-cli3),先说vue-cli2: 首先找到config/index.js文件,将assetPublicPath的路径改为"./"即可, vue-cli3的话要稍微麻烦些,因为vue-cli3简洁了许多,没有了配置文件,所以需要自己创建,只能在项目的根目录下创建,并且

  • 在Linux服务器上部署vue项目

    案例一 vue-cli构建vue3项目,将项目上传到Linux服务器,服务器安装node,并启动vue项目 首先本地有一个vue项目,启动后可正常访问 本地打包后,也可直接访问 若打包后的index.html页面显示空白,需在项目的根路径下新建vue.config.js,再重新打包,参考 Linux服务器安装nodejs,参考 # 下载node压缩包,在哪条路径下执行该命令,就会下载到哪条路径下 wget https://npm.taobao.org/mirrors/node/v12.16.1/

  • 在nginx上部署vue项目(history模式)的方法

    vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式.比如如下网址: 使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下: http://localhost:8080/bank/page/count

  • .Net Core WebApi部署在Linux服务器上的方法

    鸽了好久,终于有个时间继续写了,继上一篇之后,又写(水)了一篇,有什么不足之处请大家指出,多谢各位了. 下面有两个需要用到的软件,putty和pscp,我已经上传到博客园了,下载请点击这里. 一.准备服务器 首先和之前一样,先去腾讯云整了个云服务器,选择CentOS的镜像. 然后跟之前一样完成购买,得到公网的IP地址. 接着我们复制下来公网的IP地址,我这里使用了putty进行远程登录. 输入root用户名和你之前设置的密码进行登录. 然后,我们就可以安装.Net Core的运行环境了. 二.安

  • 服务器使用Nginx部署Vue项目

    目录 一.安装Nginx 二.部署vue 首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6 一.安装Nginx 1. 使用XShell连接我们的服务器 2. 配置 EPEL源 sudo yum install -y epel-release sudo yum -y update 3. 安装Nginx sudo yum install -y nginx 以下的内容需要记住,特别是配置文件安装成功后,默认的网站目录为: /usr/share/nginx/h

  • 五步教你用Nginx部署Vue项目及解决动态路由刷新404问题

    目录 步骤一:改端口 步骤二: 打包 步骤三:将dist文件夹上传到服务器上 步骤四:修改nginx.conf(重中之重) 步骤五:重启nginx 总结 期末月前本来部署过一次,昨天部署的时候发现又给忘了,而且出了很多问题,在这统一汇总一下. 步骤一:改端口 在vue.config.js下的devServer把host改成服务器的地址 步骤二: 打包 用npm run build打包,最后是这样的,并且目录下多了个dist文件夹 步骤三:将dist文件夹上传到服务器上 我用的xshell,没办法

  • 详解如何在云服务器上部署Laravel

    学习PHP和Laravel已经有一段时间了,但是所有的代码都是跑在本地的虚拟主机上的,于是去腾讯云申请了一个月的免费云主机,想把项目部署到云服务器上. 不得不说这里面的坑实在是有点多,让我这个初次接触服务器的小白摸不清头脑.在配置好服务器之后,部署一个Laravel项目更是费劲心思,于是乎想记录下部署Laravel项目的过程. PS: Linux真是越用越有感觉的系统,回家在台式机上也要装个Linux敲代码用. 环境简介 在操作系统的选择上,我选用了Linux ubuntu16.04的系统,使用

  • 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

    最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-index.html,顾之前版本的index页面找不到对应的js,因为我们每次发布会将之前的版本放至另外的备份目录),但关闭网页再次去打开又是正常的.最初开发内部测试时该问题没有引起关注,因为开发人员大部分都是android的手机,后来测试发现,某些android机型不是必现此问题,但是苹果(IOS)机

  • nginx 部署 vue 项目找不到js css文件的解决方法

    很多时候 npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件. vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容: ... module.exports = { baseUrl: isProd ? '/

  • Docker镜像+nginx 部署 vue 项目的方法

    一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西. 如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目. 二.获取nginx 镜像 nginx 是一个高性能的HTTP和反向代理服务器,此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像. 在终端输入: docker pull nginx 即可以获取到ngin

  • Nginx部署vue项目和配置代理的问题解析

    1.nginx安装和启动 # 安装nginx sudo apt-get install nginx # 启动 sudo service nginx start 验证安装 # 安装完成后使用nginx -v检查,如果输出nginx的版本信息表明安装成功 nginx -v # 如果输出类似于这样的版本号等,证明安装完成 nginx version: nginx/1.14.0 (Ubuntu) 2.修改nginx配置文件,部署项目 查看nginx的配置,linux系统下的配置文件通常会存放在/etc目

随机推荐