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 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
Angular.JS中的this指向详解
May 17 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 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
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
php实现数字补零的方法总结
2018/09/12 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
python计算方程式根的方法
2015/05/07 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
django教程如何自学
2020/07/31 Python
python 装饰器的使用示例
2020/10/10 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
二年级评语大全
2014/04/23 职场文书
青春无悔演讲稿
2014/05/08 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
师范生见习总结范文
2015/06/23 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers