1.部署Nginx

请参考Linux下部署nginx,此处不再重复

2.Vue项目打包

# 打包正式环境
npm run build:prod # 打包预发布环境
npm run build:stage

3. 部署时可能会发现资源路径不对 ,只需修改 vue.config.js下 文件资源路径

# 请根据自己路径来配置更改
publicPath: './'

4. 将打包后的dist文件夹上传至服务器

本次项目路径为 /usr/local/webapp/

5.修改Nginx的conf文件

vim /usr/local/nginx/cong/nginx.conf

#修改如下
server {
listen 80;
server_name localhost; # 注意设定 root路径是有dist的
location / {
root /usr/local/webapp/dist;
index /index.html;
} #跨域 ip和port自行替换
location /adminApi {
proxy_pass http://ip:port;
} }

6. 使配置生效

sbin/nginx -s reload
sbin/nginx -s stop
sbin/nginx

7.访问ip地址查看效果

Linux 部署vue项目(使用nginx)的更多相关文章

  1. nginx部署vue项目

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...

  2. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  3. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

  4. CentOS7 安装nginx部署vue项目

    简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起.   在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法 ...

  5. Docker 部署 vue 项目

    Docker 部署 vue 项目 Docker 作为轻量级虚拟化技术,拥有持续集成.版本控制.可移植性.隔离性和安全性等优势.本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思 ...

  6. Docker镜像+nginx 部署 vue 项目

    一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西 ...

  7. centos7 部署vue项目(前后端分离、nginx)

    一.环境准备 1.centos7系统 2.mysql数据库 3.在centos7虚拟机上安装好nginx 二.部署内容准备 1.后端war包 或者可执行jar 因为我这里是spring boot项目. ...

  8. Centos7 使用nginx部署vue项目

    一.安装nginx #设置源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0 ...

  9. 如何在linux上部署vue项目

    安装nginx的前奏 安装依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 创建一个文件夹 cd /usr/ ...

随机推荐

  1. MySQL Online DDL与DML并发阻塞关系总结

    MySQL DDL操作执行的三种方式 1,INPLACE,在进行DDL操作时,不影响表的读&写,可以正常执行表上的DML操作,避免与COPY方法相关的磁盘I/O和CPU周期,从而最小化数据库的 ...

  2. 华为eNSP路由交换实验-生成树之RSTP

    RSTP基础配置 实验拓扑图 实验步骤 1.基本配置 根据实验编址表进行相应的基本IP配置. 2.配置RSTP基本功能. (1)把生成树模式由默认的MSTP(华为交换机默认开启)改为RSTP. [FW ...

  3. 基于django的个人博客网站建立(六)

    基于django的个人博客网站建立(六) 前言 今天主要完成的是项目在腾讯云服务器上ubuntu16.04+django+mysql+uwsig+nginx的部署过程网站效果可点击这里访问 主要内容 ...

  4. 《Web Development with Go》JWT认证满意版

    这个比昨晚的要满意, 认证放到中间件那里了. Mux使用的是gorilla, 中间件使用的是negroni, 启动是用的negroni.classic方法. package main import ( ...

  5. Python-类的几种调用方法

    一:实例 二:静态 可以调用类以外的变量,只限于此模块. 三:类方法 可以调用该类中定义的变量进行使用. 直接上代码

  6. HTML和css常见问题解答2

    1.将一个块级元素水平和垂直居中有几种方法?分别是什么? 四种方式: (1).要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上 ...

  7. Swoole如何处理高并发

    有需要学习交流的友人请加入swoole交流群的咱们一起,有问题一起交流,一起进步!前提是你是学技术的.感谢阅读! 点此加入该群 swoole如何处理高并发 ①Reactor模型介绍 IO复用异步非阻塞 ...

  8. 小程序底部tapbar

    app.json "tabBar": { "color": "#ccc", "selectedColor": " ...

  9. INT 3 中断调试处理流程

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html INT 3 中断调试处理流程 一.调试器如何下INT 3 断点 1 ...

  10. 原生js获得八种方式,事件操作

    08.17自我总结 关于js 一.原生js获得八种方式 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTa ...