vue项目打包部署_nginx代理访问方法详解


Posted in Javascript onSeptember 20, 2018

我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解。

1、先看vue项目打包(我这里使用的是vscode开发工具)

这里是我的项目结构:

vue项目打包部署_nginx代理访问方法详解

打包之前需要修改如下配置文件:

配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题)

vue项目打包部署_nginx代理访问方法详解

配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题)

vue项目打包部署_nginx代理访问方法详解

上面两步修改完成之后就可以进行打包了

在控制台终端输入npm run build

vue项目打包部署_nginx代理访问方法详解

坐等打包

打包完成之后项目中会生成一个dist文件夹,直接访问里面的index.html就ok了

vue项目打包部署_nginx代理访问方法详解

我这里有点特殊的地方,需要修改下index.html文件,是因为自己加的一个moment.js

vue项目打包部署_nginx代理访问方法详解

ok,到这里打包的事情完成了,下面就放到服务器上去了

我这里使用的windows版本的nginx做演示,linux的不做讲解了,还有nginx的下载安装也不做讲解,直接看配置:

vue项目打包部署_nginx代理访问方法详解

配置完成后,去启动你的nginx,然后访问就ok了!

以上这篇vue项目打包部署_nginx代理访问方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
有趣的javascript数组定义方法
Sep 10 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
详解基于webpack&gettext的前端多语言方案
Jan 29 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
js计算两个日期间的天数月的实例代码
Sep 20 #Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 #Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 #Javascript
Vue框架里使用Swiper的方法示例
Sep 20 #Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 #Javascript
Vue常见面试题整理【值得收藏】
Sep 20 #Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 #Javascript
You might like
PHP函数http_build_query使用详解
2014/08/20 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
ie8本地图片上传预览示例代码
2014/01/12 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
vue实现购物车的监听
2020/04/20 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
python str与repr的区别
2013/03/23 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
函授毕业生自我鉴定
2013/11/06 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
2015年话务员工作总结
2015/04/29 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
初三语文教学反思
2016/03/03 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
MySQL大小写敏感的注意事项
2021/05/24 MySQL
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL