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 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
vue脚手架中配置Sass的方法
Jan 04 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
vue实现购物车案例
May 30 Javascript
Vue仿Bibibili首页的问题
Jan 21 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合并两个数组的两种方式的异同
2012/09/14 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
幼儿园教师自我鉴定
2014/03/20 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
查摆问题整改措施
2014/10/24 职场文书
小学远程教育工作总结
2015/08/13 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书