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和CSS交互的方法汇总
Dec 02 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
Sep 28 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 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获取操作系统语言代码
2013/11/04 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
Python中取整的几种方法小结
2017/01/06 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
python求绝对值的三种方法小结
2019/12/04 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
一些.net面试题
2014/10/06 面试题
实验教师岗位职责
2014/02/13 职场文书
劳动竞赛口号
2014/06/16 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
医院领导班子整改方案
2014/10/01 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
项目转让协议书
2014/10/27 职场文书
施工安全员岗位职责
2015/04/11 职场文书
借钱欠条怎么写
2015/07/03 职场文书
小学音乐课教学反思
2016/02/18 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android