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页面上使用动态时间具体实现
Mar 18 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
python语言使用技巧分享
2016/05/31 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
Python 3.8 新功能全解
2019/07/25 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
职称自我鉴定
2013/10/15 职场文书
大专学生推荐信范文
2013/11/19 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
网页美工求职信范文
2014/04/17 职场文书
节约用水的口号
2014/06/20 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
小学教师师德整改措施
2014/09/29 职场文书
表扬通报怎么写
2015/01/16 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
工作自我推荐信范文
2015/03/25 职场文书
《刷子李》教学反思
2016/02/20 职场文书