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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
javascript求日期差的方法
Mar 02 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
详解js的六大数据类型
Dec 27 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
uni-app微信小程序登录授权的实现
May 22 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
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
新员工辞职信范文
2015/05/12 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
Node.js实现断点续传
2021/06/23 Javascript
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
nginx设置资源请求目录的方式详解
2022/05/30 Servers