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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
Vue中的字符串模板的使用
May 17 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
js基于canvas实现时钟组件
Feb 07 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
PHP Curl出现403错误的解决办法
2014/05/29 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
php生成word并下载代码实例
2019/03/15 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
javascript学习网址备忘
2007/05/29 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
django2 快速安装指南分享
2018/01/05 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python生成n个元素的全组合方法
2018/11/13 Python
Python数据集切分实例
2018/12/08 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
20年同学聚会感言
2014/02/03 职场文书
教师远程培训感言
2014/03/06 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
未婚证明书模板
2014/10/08 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
vue里使用create, mounted调用方法
2022/04/26 Vue.js
nginx日志格式分析和修改
2022/04/28 Servers