Linux 部署vue项目(使用nginx)
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)的更多相关文章
- nginx部署vue项目
nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
- CentOS7 安装nginx部署vue项目
简单描述:代码开发完了,需要环境来运行测试.服务器上没有nginx,搞起搞起. 在Centos下,yum源不提供nginx的安装,可以通过切换yum源的方法获取安装.也可以通过直接下载安装包的方法 ...
- Docker 部署 vue 项目
Docker 部署 vue 项目 Docker 作为轻量级虚拟化技术,拥有持续集成.版本控制.可移植性.隔离性和安全性等优势.本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思 ...
- Docker镜像+nginx 部署 vue 项目
一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西 ...
- centos7 部署vue项目(前后端分离、nginx)
一.环境准备 1.centos7系统 2.mysql数据库 3.在centos7虚拟机上安装好nginx 二.部署内容准备 1.后端war包 或者可执行jar 因为我这里是spring boot项目. ...
- Centos7 使用nginx部署vue项目
一.安装nginx #设置源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0 ...
- 如何在linux上部署vue项目
安装nginx的前奏 安装依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 创建一个文件夹 cd /usr/ ...
随机推荐
- MySQL Online DDL与DML并发阻塞关系总结
MySQL DDL操作执行的三种方式 1,INPLACE,在进行DDL操作时,不影响表的读&写,可以正常执行表上的DML操作,避免与COPY方法相关的磁盘I/O和CPU周期,从而最小化数据库的 ...
- 华为eNSP路由交换实验-生成树之RSTP
RSTP基础配置 实验拓扑图 实验步骤 1.基本配置 根据实验编址表进行相应的基本IP配置. 2.配置RSTP基本功能. (1)把生成树模式由默认的MSTP(华为交换机默认开启)改为RSTP. [FW ...
- 基于django的个人博客网站建立(六)
基于django的个人博客网站建立(六) 前言 今天主要完成的是项目在腾讯云服务器上ubuntu16.04+django+mysql+uwsig+nginx的部署过程网站效果可点击这里访问 主要内容 ...
- 《Web Development with Go》JWT认证满意版
这个比昨晚的要满意, 认证放到中间件那里了. Mux使用的是gorilla, 中间件使用的是negroni, 启动是用的negroni.classic方法. package main import ( ...
- Python-类的几种调用方法
一:实例 二:静态 可以调用类以外的变量,只限于此模块. 三:类方法 可以调用该类中定义的变量进行使用. 直接上代码
- HTML和css常见问题解答2
1.将一个块级元素水平和垂直居中有几种方法?分别是什么? 四种方式: (1).要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上 ...
- Swoole如何处理高并发
有需要学习交流的友人请加入swoole交流群的咱们一起,有问题一起交流,一起进步!前提是你是学技术的.感谢阅读! 点此加入该群 swoole如何处理高并发 ①Reactor模型介绍 IO复用异步非阻塞 ...
- 小程序底部tapbar
app.json "tabBar": { "color": "#ccc", "selectedColor": " ...
- INT 3 中断调试处理流程
Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html INT 3 中断调试处理流程 一.调试器如何下INT 3 断点 1 ...
- 原生js获得八种方式,事件操作
08.17自我总结 关于js 一.原生js获得八种方式 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTa ...