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下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
手机号码,密码正则验证
Sep 04 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 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
德生PL990的分析评价
2021/03/02 无线电
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php教程之phpize使用方法
2014/02/12 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
javascript json2 使用方法
2010/03/16 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
JSON格式化输出
2014/11/10 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
python的类方法和静态方法
2014/12/13 Python
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
python常用运维脚本实例小结
2020/02/14 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
Delphi笔试题
2016/11/14 面试题
委托函范文
2015/01/29 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python