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 相关文章推荐
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
vue组件横向树实现代码
Aug 02 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
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自动注册登录验证机制实现代码
2011/12/20 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
jQuery使用方法
2017/02/04 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
铭立家具面试题
2012/12/06 面试题
人事助理自荐信
2014/02/02 职场文书
小学安全教育材料
2014/02/17 职场文书
老兵退伍标语
2014/10/07 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis