Vue-cli项目部署到Nginx服务器的方法


Posted in Javascript onNovember 01, 2019

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项目部署到Nginx服务器的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript !!的作用
Dec 04 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 #Javascript
浅析js实现网页截图的两种方式
Nov 01 #Javascript
javascript使用链接跨域下载图片
Nov 01 #Javascript
async/await让异步操作同步执行的方法详解
Nov 01 #Javascript
浅谈Three.js截图并下载的大坑
Nov 01 #Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 #Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 #Javascript
You might like
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
js实现自定义路由
2017/02/04 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python decimal模块使用方法详解
2020/06/08 Python
英国高街电视:High Street TV
2018/05/22 全球购物
经典c++面试题六
2012/01/18 面试题
linux下进程间通信的方式
2013/01/23 面试题
绿化先进工作者事迹材料
2014/01/30 职场文书
物控部经理职务说明书
2014/02/25 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
大学军训感言1500字
2014/03/09 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
2015高考寄语集锦
2015/02/27 职场文书
创业计划书之冷饮店
2019/09/27 职场文书