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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 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
COM in PHP (winows only)
2006/10/09 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
Z-Blog中用到的js代码
2007/03/15 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
车间调度岗位职责
2013/11/30 职场文书
出纳担保书范文
2014/04/02 职场文书
维修工先进事迹
2014/05/29 职场文书
开除通知书范本
2015/04/25 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
2022微信温控新功能上线
2022/05/09 数码科技