编程 Javascript

vue项目打包部署_nginx代理访问方法详解

Posted in Javascript onSeptember 20, 2018

我又来了，今天部署了下vue项目，使用nginx做了代理，这样可以解决跨域的问题，这里做一个简单讲解。

1、先看vue项目打包（我这里使用的是vscode开发工具）

这里是我的项目结构：

打包之前需要修改如下配置文件：

配置文件一：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代理访问方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

vue项目打包部署_nginx代理访问方法详解

- Author -

kaola_l

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery Study Notes 学习笔记(一)

Aug 04 Javascript

js判断字符长度以及中英文数字等

Dec 31 Javascript

JavaScript中的prototype.bind()方法介绍

Apr 04 Javascript

JS+CSS实现的日本门户网站经典选项卡导航效果

Sep 27 Javascript

星期几的不同脚本写法(推荐)

Jun 01 Javascript

json对象与数组以及转换成js对象的简单实现方法

Jun 24 Javascript

jQuery简单注册和禁用全局事件的方法

Jul 25 Javascript

vue.js 表格分页ajax 异步加载数据

Oct 18 Javascript

ES6模块化的import和export用法方法总结

Aug 08 Javascript

jQuery实现简单复制json对象和json对象集合操作示例

Jul 09 jQuery

JS实现面向对象继承的5种方式分析

Jul 21 Javascript

jQuery使用ajax传递json对象到服务端及contentType的用法示例

Mar 12 jQuery

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生成带有雪花背景的验证码

2006/10/09 PHP

php基础设计模式大全(注册树模式、工厂模式、单列模式)

2015/08/31 PHP

利用php-cli和任务计划实现订单同步功能的方法

2017/05/03 PHP

Yii2框架redis基本应用示例

2018/07/13 PHP

PHP+MySQL实现在线测试答题实例

2020/01/02 PHP

Javascript对象中关于setTimeout和setInterval的this介绍

2012/07/21 Javascript

js如何获取file控件的完整路径具体实现代码

2013/05/15 Javascript

Egret引擎开发指南之视觉编程

2014/09/03 Javascript

一个通过script自定义属性传递配置参数的方法

2014/09/15 Javascript

浅谈Jquery为元素绑定事件

2015/04/27 Javascript

JS实现从连接中获取youtube的key实例

2015/07/02 Javascript

javascript中this指向详解

2016/04/23 Javascript

微信小程序-获得用户输入内容

2017/02/13 Javascript

vue中appear的用法

2017/08/17 Javascript

详解利用 Express 托管静态文件的方法

2017/09/18 Javascript

AngularJS 表单验证手机号的实例(非必填)

2017/11/12 Javascript

angular中如何绑定iframe中src的方法

2019/02/01 Javascript

关于vue组件事件属性穿透详解

2019/10/28 Javascript

Vue + Scss 动态切换主题颜色实现换肤的示例代码

2020/04/27 Javascript

Vue列表如何实现滚动到指定位置样式改变效果

2020/05/09 Javascript

python中类的一些方法分析

2014/09/25 Python

flask-socketio实现WebSocket的方法

2018/07/31 Python

pandas.DataFrame删除/选取含有特定数值的行或列实例

2018/11/07 Python

python字符串和常用数据结构知识总结

2019/05/21 Python

python虚拟环境模块venv使用及示例

2020/03/04 Python

Python3利用scapy局域网实现自动多线程arp扫描功能

2021/01/21 Python

python实现控制台输出颜色

2021/03/02 Python

CSS3解析抖音LOGO制作的方法步骤

2019/04/11 HTML / CSS

Vichy薇姿加拿大官网：法国药妆，全球专业敏感肌护肤领先品牌

2018/07/11 全球购物

OnePlus加拿大官网：中国国际化手机品牌

2020/10/13 全球购物

房屋租赁协议书

2014/04/10 职场文书

财务人员担保书

2014/05/13 职场文书

春节联欢会策划方案

2014/05/16 职场文书

高中同学会活动方案

2014/08/14 职场文书

Vue CLI中模式与环境变量的深入详解

2021/05/30 Vue.js

Python利用FlashText算法实现替换字符串

2022/03/31 Python