vue项目打包部署_nginx代理访问方法详解
时间:2018-09-20
今天小编就为大家分享一篇vue项目打包部署_nginx代理访问方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解。
1、先看vue项目打包(我这里使用的是vscode开发工具)
这里是我的项目结构:
打包之前需要修改如下配置文件:
配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题)
配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题)
上面两步修改完成之后就可以进行打包了
在控制台终端输入npm run build
坐等打包
打包完成之后项目中会生成一个dist文件夹,直接访问里面的index.html就ok了
我这里有点特殊的地方,需要修改下index.html文件,是因为自己加的一个moment.js
ok,到这里打包的事情完成了,下面就放到服务器上去了
我这里使用的windows版本的nginx做演示,linux的不做讲解了,还有nginx的下载安装也不做讲解,直接看配置:
配置完成后,去启动你的nginx,然后访问就ok了!
以上这篇vue项目打包部署_nginx代理访问方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ggplot画鸡冠花图
- 简单理解python中的self
- fgsea做GSEA
- 27.opengl高级光照-点光源阴影
- 28.opengl高级光照-法线贴图
- python抓取动态验证码,具体第几帧数的位置静态图片
- 在 Spring Security 中,我就想从子线程获取用户登录信息,怎么办?
- php自动加载
- 011.Nginx防盗链
- 012.Nginx负载均衡
- 013.Nginx动静分离
- 014.Nginx跨域配置
- 深入理解 FilterChainProxy【源码篇】
- matplotlib基础绘图命令之bar
- 使用 Github Actions 自动部署 Angular 应用到 Github Pages