本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.html

因为编者已经为该项目已经实现了VUE接口统一管理,所以接下来的讲解是在这个接口统一管理的环境下进行的

关于VUE接口统一管理,可以参照这里:

参照1:https://www.cnblogs.com/yingyigongzi/p/10863477.html

参照2:https://www.codercto.com/a/53432.html

我的项目,

在开发环境中,关于接口有三个步骤:

1.在config/index.js中设置接口代理

2.在navigationTree.js中设置接口的统一管理 (navigationTree.js怎么来的,请参考我上文说的两篇参考文章链接)

3.在组件中调用这个接口

调用方法

开发这样设置,就可以解决跨域,并且统一管理接口,能拿到数据了

生产环境

开发结束后就要打包,上线

步骤

1.nginx安装目录下的conf/nginx.conf文件进行配置

我把这部分代码贴出来

server {
listen 8081; #前端服务启动后,访问用的端口
server_name localhost; #访问前端服务的IP #charset koi8-r; #access_log logs/host.access.log main; # 匹配以/nginxGetTreeListForSoilByRegion/开头的请求
location ^~ /nginxGetTreeListForSoilByRegion/ {
proxy_pass 你自己的真实接口地址;
} location / {
root D:/peixun/nginx-1.16.0/html/dist; #前端dist文件夹的绝对路径
index index.html index.htm;
}
#剩下代码都一样,略

2.去VUE项目的config/index.js 里,设置打包上线的接口配置,配合nginx已经设置好的代理接口名(我这里用nginx代理的接口名是nginxGetTreeListForSoilByRegion)

3.去navigationTree.js里,把之前开发用的接口配置,也改成打包上线用的配置

以上3步设置好后,在该VUE项目的路径下,执行cmd的npm run build

将得到的dist文件夹,放入nginx安装目录的html文件夹内,即可

//----------------------------------------------------------------访问本地json数据时-----------------------------------------------------------------------------------

我们在开发时,将本地json文件放入static文件夹内,打包的时候,该json文件也会自动打包进dist里面的static文件夹内

访问本地json,只要修改nginx里的conf/nginx.conf文件即可

我把代码贴出来

 server {
listen 8081; #前端服务启动后,访问用的端口
server_name localhost; #访问前端服务的IP #charset koi8-r; #access_log logs/host.access.log main; # 匹配以/nginxGetTreeListForSoilByRegion/开头的请求
location ^~ /nginxGetTreeListForSoilByRegion/ {
# 访问远程接口数据
# proxy_pass 你远程接口的地址
# 访问本地json http://localhost:8081 代表着你项目在服务器的地址,我这边就是D:\peixun\nginx-1.16.0\html\dist,这是在root处设置的
proxy_pass http://localhost:8081/static/testData/GetTreeListForSoilByRegion.json;
} location / {
root D:/peixun/nginx-1.16.0/html/dist; #前端dist文件夹的绝对路径 这个就等同于 http://localhost 至于端口号8081,则是在listen处设置的
index index.html index.htm;
}

vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题的更多相关文章

  1. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  2. vue项目打包部署到服务器,静态资源文件404

    js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...

  3. vue之项目打包部署到服务器

    这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...

  4. Vue项目打包部署到apache服务器

    vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...

  5. vue项目 打包部署上线

    1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...

  6. vue项目打包部署elementUI的字体图标丢失问题

    自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...

  7. vue项目打包部署到nginx 服务器上

    假如要实现的效果如下 http://ip/vue    =>是进入首页访问的路径是  usr/local/nginx/html/vue http://ip/website     =>是进 ...

  8. vue+ elementUI 打包发布到服务器后,element-icons.woff文件404

    vue项目打包部署到服务器,静态资源文件404 js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文 ...

  9. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

随机推荐

  1. EXCEL中的多个条件同时成立写法

    =IF(AND($B2>0,$C2>0,$D2>0,$E2>0),(($B2*1000/$C2/60/$D2)*$E2),0)点击F2,粘贴上边的公式选择F2到f200ctrl ...

  2. 高校表白App-团队冲刺第六天

    今天要做什么 在引导页的基础上添加小红点,并且在滑动时进行增强用户体验的修饰 做了什么 在布局中成功添加小红点,并在activity中得到实现;滑动在3/4时发生渐变,增强用户体验;滑动可回退;在最后 ...

  3. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  4. sql-1-准备

    一.准备工作 1.mysql安装和配环境 不要以exe文件安装,要下载压缩包安装 下载地址:https://dev.mysql.com/downloads/mysql 在系统path中加上bin目录 ...

  5. 前端性能之LightHouse

    "灯塔"(LightHouse)前端性能优化测试工具 (谷歌亲儿子) 一 灯塔v6/v7版是通过几种性能指标及不同权重来进行计分的 前端性能指标主要是根据PerformanceTi ...

  6. windows10激活方法

    原文转自:http://www.ylmfwin100.com/ylmf/8643.html 现在市面上大致有两种主流激活方法,一种是通过激活码来激活,另外一种是通过激活工具来激活.但是激活工具有个弊端 ...

  7. JIS-CTF_VulnUpload靶机

    仅供个人娱乐 靶机信息 下载地址:https://www.vulnhub.com/entry/jis-ctf-vulnupload,228/ 一.网卡设置 设置为NAT模式, 使用vi去修改/etc/ ...

  8. Moonraker靶机

    仅供个人娱乐 靶机搭建与下载 Monraker靶机ip: 192.168.181.135 kali攻击者ip : 192.168.181.128 说明:获取目标主机的root权限并读取目录中的flag ...

  9. 创建函数function

    1.创建普通函数 function 函数名称(){ 函数体://封装的代码 } 函数名称()://调用函数 function getSum(){ for(var i=1,sum=0;i<=100 ...

  10. SpringCloud升级之路2020.0.x版-7.从Bean到SpringCloud

    本系列为之前系列的整理重启版,随着项目的发展以及项目中的使用,之前系列里面很多东西发生了变化,并且还有一些东西之前系列并没有提到,所以重启这个系列重新整理下,欢迎各位留言交流,谢谢!~ 在理解 Spr ...