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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
详解js中==与===的区别
Jan 08 Javascript
jquery图片放大镜效果
Jun 23 jQuery
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
js 函数性能比较方法
Aug 24 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
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python连接mysql方法及常用参数
2020/09/01 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
音乐专业自荐信
2014/02/07 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
三年级学生评语
2014/04/23 职场文书
工程项目经理任命书
2014/06/05 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
先进集体申报材料
2014/12/25 职场文书
会议通知
2015/04/15 职场文书
关于MySQL中explain工具的使用
2023/05/08 MySQL