首页 > 系统相关 >nginx部署vue网站

nginx部署vue网站

时间:2023-07-12 11:11:56浏览次数:34  
标签:node npm vue tar 部署 v14.17 nginx local

1.背景    

    最近gpt很火,于是尝试用gpt来进行古诗词取名,做了一个vue的网站进行展示,第一次部署,踩了一些坑。

2.实施

nodejs安装:

  1. 在任意目录执行如下命令进行安装包下载:wget https://npm.taobao.org/mirrors/node/v14.17.6/node-v14.17.6-linux-x64.tar.gz

  2. 解压 tar -zxvf node-v14.17.6-linux-x64.tar.gz 

  3. 建立软连接ln -s /opt/software/node/node-v14.17.6-linux-x64/bin/npm /usr/local/bin/npm ln -s /opt/software/node/node-v14.17.6-linux-x64/bin/node /usr/local/bin/node

  4. 4.npm -v验证是否安装成功

    vue项目打包:

    1. 执行npm  run build

    2. 拷贝dist目录的所有文件到服务任一目录

    3. nginx配置:

1.执行如下命令安装nginx。

yum -y install make zlib zlib-devel gcc gcc-c++ libtool openssl openssl-devel pcre pcre-devel
wget https://nginx.org/download/nginx-1.16.1.tar.gz
tar -zxvf nginx-1.16.1.tar.gz 
mkdir /usr/local/nginx
进行nginx目录执行 ./configure --prefix=/usr/local/nginx
make
make install
 ./nginx   启动

  2.配置nginx,在nginx的配置文件里面调整如下内容,注意后台的接口路径建议统一加上/api路径,这样配置nginx就可像下面那样配置即可,比较简单方便。

 

3.验收

    访问弹出登录界面。

 

 

关注公众号码农独白,回复取名,获取体验地址及账号:

 

 

标签:node,npm,vue,tar,部署,v14.17,nginx,local
From: https://www.cnblogs.com/beststrive/p/17546993.html

相关文章

  • 2023-07-12 vue this.$set设置子组件内的值无效(uniapp+vue)
    前言:怎么说呢,子组件内嵌套了多层对象和数组,业务逻辑也是在子组件内处理,如何修改多层嵌套的对象数组的值?vue提供了一个this.$set方法去改变对应的值,实测在uniapp打包的微信小程序中无法使用该方法,而在Android端则可以,那有没有两全其美的方法?答案是有,在修改深层次的值时可以通过先......
  • XXL-JOB 打包成war部署
    1、修改配置xxl-job.pom.xml<failOnMissingWebXml>false</failOnMissingWebXml> 2、修改xxl-job-admin.pom.xml<packaging>war</packaging> <plugin><groupId>org.apache.maven.plugins</groupId><artifactId&g......
  • 记一个nginx的配置
    cat/usr/share/nginx/html/index.htmlHelloMyApp|Version:v1|<ahref="hostname.html">PodName</a>location/{root/usr/share/nginx/html;indexindex.htmlindex.htm;}#error_page404......
  • Docker部署
    概述最近在学习后端的各种中间件,如果一个个安装,估计所有的时间都得在部署运维上面了,没有时间编写测试代码了,因此学习记录下docker的方法,意在简化部署方式,将主要精力放在研究使用中间件上。官网下载安装dockerhttps://docs.docker.com/desktop/install/docker流程1.dockerpul......
  • Java扩展Nginx之三:基础配置项
    欢迎访问我的GitHub这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos本篇概览经历了前面两篇的入门和编译源码之后,从本篇起,咱们用理论结合实战的方式进入系统的nginx-clojure学习之旅作为《Java扩展Nginx》系列的第三篇,本文会与大家一起了......
  • Nginx代理Mysql
    10.2.24.161部署nginx,代理10.2.24.191:3306数据库1.安装stream模块nginx默认不会编译stream模块的,需要在编译的时候,指定--with-stream./configure--prefix=xxx--add-module=xxxx--add-module=xxx--with-stream我在10.2.24.161执行:./configure--prefix=/opt/local/nginx......
  • vue学习——vue实例与组件
     vc不是通用的称呼,官方的说法是组件实例对象 组件实例的原型对象的原型对象是vue的原型对象 ......
  • 18:vue3 异步加载
    在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。Vue提供了 defineAsyncComponent 方法来实现此功能: 1<template>2<h3>异步加载</h3>3<KeepAlive>4<component:is="tabComponent"></component>5</KeepAlive>......
  • vue2基础 入门vue2
    vue基础vue项目搭建vue单文件组件mustach表达式vue指令methods方法filters过滤器computed计算属性watch监听器vue组件vue-router路由vue生命周期vue组件通信slot插槽vuex状态管理前言vuejs是一个构建数据驱动的渐进式MVVM框架......
  • ASP.Net Core 项目部署
    安装环境部署环境有两种:.NetCoreSDK包含所有运行时和程序开发包,用于程序开发使用,体积相对较大。.NetCoreRuntime仅用于程序运行,不包含开发包,体积小。注:部署程序时不推荐安装SDK,优先使用Runtime环境。下载地址:[https://dotnet.microsoft.com/download]控制台运行......