首页 > 系统相关 >将 Vue 项目部署到 Nginx 上

将 Vue 项目部署到 Nginx 上

时间:2023-06-20 09:03:56浏览次数:59  
标签:index Vue dist nginx 部署 Nginx html

将 Vue 项目部署到 Nginx 上

安装 Nginx

下载地址:nginx: download (1)因为我在 Windows 系统下安装 Nginx,所以选择 nginx/Windows-1.22.1。下载的资源是一个压缩包,解压后即可使用。 (2)打开命令行提示符(cmd),切换到 Nginx 的根目录,启动 Nginx 服务器。
cd /D D:/software/nginx-1.22.1

start nginx.exe
(3)访问 http://localhost/,如果出现 Nginx 的欢迎界面则表示服务器正常运行。 (4)其他一些常用的 Nginx 指令。
# 强制关闭
nginx -s stop
# 优雅关闭
nginx -s quit
# 重启
nginx -s reload

打包项目

默认情况下,Vue 项目的打包指令如下:
npm run build
指令执行成功后,将会在当前项目目录下,生成一个 dist 文件夹。

将项目部署到 Nginx 上

将 dist 文件夹放在 Nginx 的 html 目录下,然后打开 conf/nginx.conf 文件,修改
server {
    ...
    location / {
        root   html/dist;
        index  index.html index.htm;
    }
    ...
}
重启服务器。
nginx.exe -s reload
 

标签:index,Vue,dist,nginx,部署,Nginx,html
From: https://www.cnblogs.com/daydayupup/p/17492685.html

相关文章

  • Apache DolphinScheduler(海豚调度系统)介绍与环境部署
    目录一、概述二、ApacheDolphinScheduler与Azkaban对比三、DolphinScheduler架构设计四、环境部署1)环境信息2)安装JDK3)安装MySQL数据库1、部署docker2、部署docker-compose3、安装git3、开始部署4)安装注册中心Zookeeper5)下载dolphinscheduler安装包6)修改配置1、修改......
  • vue el-input 输入框 限制小数点后 只能有三位小数
     ​​oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+4)}"​​  ......
  • vue中使用axios
    引入axios错误用法在main.js中引入,需要注意的是,因为axios是第三方库,不是vue的插件,所以下面的这种写法不支持。importaxiosfrom'axios';Vue.use(axios)正确用法结合vue-axios使用,vue-axios是将axios集成到Vue.js的小包装器,可以像插件一样进行安装,具体用法是:安装......
  • vue通信-provide&inject
    刚完成一个需求,父组件开启一个任务,开启后孙组件显示一个执行按钮,在孙组件中点击执行按钮,再到父组件中执行任务并隐藏按钮;可以使用props和emit实现,因为组件层级较多,所以考虑使用provide&inject实现父组件和孙组件的通信;以下代码记录实现过程:父组件:Parent.vue<template> <div>......
  • BUUCTF:[SUCTF 2019]Pythonginx
    @app.route('/getUrl',methods=['GET','POST'])defgetUrl():url=request.args.get("url")host=parse.urlparse(url).hostnameifhost=='suctf.cc':return"我扌yourproblem?111&q......
  • Html使用Vue3+ElementPlus(图标 ElMessage)
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="wid......
  • Liunx nginx服务
    目录一、nginx概念二、nginx特点三、nginx应用场景四、nginx和apache五、阻塞和非阻塞六、同步和异步七、编译安装nginx八、升级nginx九、总结     一、nginx概念1.nginx概念Nginx("enginex")是一个高性能的HTTP和反向代理服务器。Nginx......
  • nginx 1.25. 1 发布
    nginx1.25.1有一个很不错的特性,就是支持了http2指令,以前这个指令主要是也listen配置使用的(ssl+http2场景)独立指令之后就有了很方便的功能了,比如有些业务希望使用http0.9-1.1协议,有些需要使用http2,当然目前也是支持了http3的,可以做到分离,以前版本存在一个问题就是开启了......
  • 银行麒麟系统离线部署clickhouse三节点集群
    在国产化环境下部署clickhouse集群,个人建议先查看cpu的内核信息,可能有的人会说,去银河麒麟的官网查看适配的版本信息,实践证明,官网的未必就是真的正确好比银河麒麟的官网是这样介绍的我在安装的过程中,就会报不支持的二进制文件的错误,所以这里不建议安装官网推荐的版本,毕竟是在国......
  • 记录--Vue3 封装 ECharts 通用组件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助按需导入的配置文件配置文件这里就不再赘述,内容都是一样的,主打一个随用随取,按需导入。import*asechartsfrom"echarts/core";//引入用到的图表import{LineChart,typeLineSeriesOption}from"echarts/......