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 读后台cookie代码
Sep 15 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
Oct 10 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 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中去掉字符串首尾空格的方法
2012/05/19 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
python语言使用技巧分享
2016/05/31 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
详解python单元测试框架unittest
2018/07/02 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
网吧温馨提示
2015/07/17 职场文书
趣味运动会加油词
2015/07/18 职场文书
追悼会家属答谢词
2015/09/29 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python