vue-cli部署ngixs_Vue-cli项目部署到Nginx
项目环境:
0. Nginx使用
以windows版为例,下载niginx压缩包并解压到任意目录,双击nginx.exe,在浏览器中访问http://localhost,如果出现Welcome to nginx!页面则说明成功。
nginx常用命令如下:
nginx -h# 打开帮助
nginx -t# 检查配置文件是否正确
# 以下命令均要先启动nginx才能执行
nginx -s stop# 停止
nginx -s quit# 退出
nginx -s reopen# 重新启动(注意不会重新读取配置文件)
nginx -s reload# 重新读取配置文件
1. 部署项目到Nginx根目录
对于vue-cli创建的项目,修改vue.config.js文件(位于项目根目录下,没有的话自行创建):
module.exports = {
// 开发环境中使用的端口
devServer: {
port: 8001
},
// 取消生成map文件(map文件可以准确的输出是哪一行哪一列有错)
productionSourceMap: false,
// 开发环境和部署环境的路径
publicPath: process.env.NODE_ENV === 'production'
? '/'
: '/my/',
configureWebpack: (config) => {
// 增加 iview-loader
config.module.rules[0].use.push({
loader: 'iview-loader',
options: {
prefix: false
}
})
// 在命令行使用 vue inspect > o.js 可以检查修改后的webpack配置文件
}
}
在vue项目根目录中使用命令npm run build创建输出文件,将dist文件夹下的所有内容复制到nginx目录下的webapp/内(没有的话自行创建)。
修改nginx目录中的conf/nginx.conf文件,在 http -> server 节点中,修改location节的内容:
location / {
root webapp;
index index.html index.htm;
}
在nginx根目录使用命令nginx -s reload即可在浏览器中通过http://localhost访问项目。
2. 多个项目部署到Nginx
有时一个Nginx中放了好几个子项目,需要将不同的项目通过不同的路径来访问。
对于项目1而言,修改vue.config.js文件的publicPath:
publicPath: '/vue1/'
对于项目2而言,修改vue.config.js文件的publicPath:
publicPath: '/vue2/'
分别在vue项目根目录中使用命令npm run build创建输出文件,将dist文件夹下的所有内容复制到nginx目录下的webapp/vue1和webapp/vue2内(没有的话自行创建)。
修改nginx目录中的conf/nginx.conf文件,在 http -> server 节点中,修改location节的内容:
location /vue1 {
root webapp;
index index.html index.htm;
}
location /vue2 {
root webapp;
index index.html index.htm;
}
在nginx根目录使用命令nginx -s reload即可在浏览器中通过http://localhost/vue1、http://localhost/vue2访问项目1、项目2。
3. 端口代理
当前后端项目分别部署在同一台机器上时,由于无法使用相同的端口,故后端一般会将端口号设置成不同的值(例如8080),但是当前端向后端请求资源时还要加上端口号,未免显得麻烦,故利用可以nginx将前端的指定路径代理到后端的8080端口上。
在conf/nginx.conf文件中增加location:
location /api {
proxy_pass http://localhost:8080/api;
}
这样,当前端访问/api路径时,实际上访问的是http://localhost:8080/api路径。
vue-cli部署ngixs_Vue-cli项目部署到Nginx相关推荐
- 42. Vue、React 等前端项目部署,刷新 404 问题解决方案
首发于我的github博客, 欢迎关注 nginx 匹配的 try_file 与前端路由的优先级问题 场景描述: 访问www.abc.com, 之后点击界面里面的logout,前端路由处理,跳转到ww ...
- [项目过程中所遇到的各种问题记录]部署篇——项目部署过程中那些纠结的问题-SQLServer...
前一篇文章说了些有关IIS的,这篇则是说SQLServer的,相比IIS来说,SQLServer的配置过程中问题就少了许多,而且都比较有针对性,下面开始记录: 注:由于实际项目的开发都是基于SQL20 ...
- kubernetes(七)项目部署方式:蓝绿部署,灰度发布/金丝雀发布,滚动更新
在项目迭代的过程中,不可避免需要上线进行部署. 目前项目部署的方式有很多种:像重新部署,蓝绿部署,金丝雀部署(灰度部署),滚动更新.本文简单介绍下这些常见的部署方案以及使用k8s怎么进行对应部署 重新 ...
- Linux基础学习五(1):java项目部署实战教程
项目部署:就是将集成开发工具(eclipse.idea)中开发编译好的项目,部署到tomcat中运行的过程. 本地部署 本地部署:将项目部署到本机安装的tomcat中,可以借助于开发工具的本身的提供的 ...
- django+nginx+uwsgi项目部署文档整理
django+nginx+uwsgi项目部署文档整理 参考文章:https://blog.csdn.net/qq_42314550/article/details/81805328 一.python安 ...
- 【Java】购买腾讯云服务器,并部署Spring boot项目,再到部署自己的个人博客,域名备案,安全连接配置
云服务器部署 一.购买腾讯云服务器 二.简单配置 2.1 进入控制台 2.2 配置防火墙 2.3 配置访问密码 三.远程ssh登录连接服务器 四.云服务器安装软件 4.1 安装JDK 4.2 安装My ...
- Python-Web项目部署-欧阳桫-专题视频课程
Python-Web项目部署-142人已学习 课程介绍 手把手带你从零开始将PythonWeb应用部署到阿里云 课程收益 掌握PythonWeb应用的部署方式 讲师介绍 ...
- 百战商城(十二)-项目部署
一.项目部署概述 1.项目部署, 项目开发结束, 测试通过, 将项目分别部署到指定服务器的过程. 2.分布式项目, 多个模块构成完整的项目. 多个模块可以分别部署到不同的服务器上. 不同服务器的访问地 ...
- Kubernetes_部署_k8s的四种部署策略(滚动更新、重新创建、金丝雀部署、蓝绿部署)
文章目录 一.前言 二.滚动更新 2.1 滚动更新 2.2 实践 2.2.1 新建两个springboot项目,生成两个镜像 2.2.2 kubectl apply启动 2.2.3 将版本修改为v2. ...
- 关于springboot vue前后端分离项目部署到阿里云轻量服务器(前后端分开部署)
0.购买阿里云服务器 1.安装jdk 使用yml安装 2.安装mysql 3.安装nginx 4.打包后端项目 后端项目更改: 在pom.xml文件中,增加打包成jar包的配置文件 applicati ...
最新文章
- 微型计算机三包法第30条内容,我不同意国家对电视机三包有明确规定,还是检测手段有问题。保修内容明确维护好消费者的权益。- 法律快车法律咨询...
- 面向对象数据库NDatabase_初识
- PLSQL的截取函数
- SLB vs CLB
- WCF生成客户端对象方式解析
- zookeeper在windows上安装和配置
- SerialPort comstat is being used without defining
- PAT (Basic Level) Practice1007 素数对猜想
- Office web component learning ---- Spreadsheet learning
- Sublime Text3 插件:convertToUTF8
- 王不留,混迹基层八年穷屌丝,考研准备四个月,考上中国科技大学MBA,成为一家软件上市公司中层管理者(附备考攻略)
- 2022年java知识点汇总,面试大全!超级全面,逐步完善!
- 微型计算机usb接口通常串行,usb是串行接口吗_串行接口和并行接口有什么区别...
- Rockcip Android多媒体框架 Codec2
- 概率论与数理统计前两章总结
- android 打开qq临时会话,Electron 中打开 QQ 临时会话
- ~ 运算符和 ~~ 运算符(JS)
- 关于AI-人工智能看法,进行漫谈。
- Sublime Text3轻量型跨平台C/C++开发环境(上) 安装使用篇
- Fiddler抓包夜神模拟器
热门文章
- .net core 引用jar_Python一键转Jar包,Java调用Python新姿势!
- 【Jetson Nano学习笔记】3. ORB-SLAM3运行双目Demo(ZED 2i)
- CC254x--BLE
- Linux C 函数指针应用---回调函数
- 使用 rose 将 c++代码转换为 uml 类图
- 使用css优雅解决文字两端对齐的方式之一
- React开发(141):react中ref为class添加ref
- 前端学习(3169):react-hello-react之对props进行限制
- 工作380-js判断是否为空
- [js] 举例说明面向对象编程有什么缺点?