在Vue开发当中经常会遇到各种各样的接口问题,最近在项目中遇到开发和线上环境接口路径不一样的问题,网上找到很多博客,大多都是千篇一律的复制粘贴,对于新手来说可能比较难以理解,所以我写这篇博客分享给刚使用vue做项目的小萌新同学一个详细的接口配置思路。
webpack提供了生产环境和线上环境的两种配置文件,平时开发当中使用一个接口,项目上线后就会自动切换成另外一个接口,废话不多说,下面上图。首先是找到vue-cli项目中config文件夹下的devenvjs,默认是下面的样子:
然后我们需要添加开发环境中使用的请求后台数据的接口域名,如下图:
url_api是我自己设置的,可以自定义。后面的路径就是你自己开发环境中的接口。
接着找到prodenvjs,默认如下图:
在这个文件中同样添加线上请求接口的配置:
最后在自己封装的axios中去调用这个接口:
自定义变量 = processenvurl_api(这个就是刚才在config两个文件中自定义的),拼接url到封装的axios中。最后在生产环境中npm run dev 的时候会自动调用刚才在devenvjs中定义的接口,当使用npm run build 去打包的时候会自动调用prodenvjs中配置的接口。
另外:跨域的问题
可能有些小伙伴在vue中配置了跨域的代理,所以导致拼接url中proxy代理失效,依然出现跨域的问题,解决这个问题我的个人思路是代理配置不变,只需要在devenvjs中用空字符串替换本地接口。就不会出现开发环境中跨域的问题了。有不明白的可以问我,有更好的方案也希望能不吝赐教,谢谢。
链接：>
检查是否安装成功
Vue build ==> 打包方式，回车即可；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
1、build：构建脚本目录
1）buildjs ==> 生产环境构建脚本；
2）check-versionsjs ==> 检查npm，nodejs版本；
3）utilsjs ==> 构建相关工具方法；
4）vue-loaderconfjs ==> 配置了css加载器以及编译css之后自动添加前缀；
5）webpackbaseconfjs ==> webpack基本配置；
6）webpackdevconfjs ==> webpack开发环境配置；
7）webpackprodconfjs ==> webpack生产环境配置；
2、config：项目配置
1）devenvjs ==> 开发环境变量；
2）indexjs ==> 项目配置文件；
3）prodenvjs ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些或者公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；
3）router：前端路由，我们需要配置的路由路径写在indexjs里面；
4）Appvue：根组件；
5）mainjs：入口js文件；
5、static：静态资源目录，如、字体等。不会被webpack构建
6、indexhtml：首页入口文件，可以添加一些 meta 信息等
7、packagejson：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、READMEmd：项目的说明文档，markdown 格式
9、xxxx文件：这些是一些配置文件，包括语法配置，git配置等
1解决vue不能自动打开浏览器的问题：当我们输入npm run dev，运行项目，命令行提示我们运行成功，但是浏览器也没有自动打开，只能自己手动输入。
改完之后重启一下即可。
2为了避免端口冲突，也可以修改port，打开目录同上
更改成功：
1 如果你已经全局安装了旧版本的 vue-cli(1 或2)，你需要先通过
npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它(卸载脚手架)
2全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli
3全局安装了vue-cli3 但是还想用vue-cli2 ,添加一个桥接工具 命令：npm install -g @vue/cli-init
4可以进行创建项目了
vue-cli2: 命令：vue init webpack my_project
vue-cli3 命令：vue create my-project
3版本不同 安装方式也不同
vue-cli2: 命令 npm install -g vue-cli
vue-cli3: 命令 npm install -g @vue/cli
3版本不同的创建项目方式不同
vue-cli2: 命令：vue init webpack my_project
vue-cli3 命令：vue create my-project
4vue-cli2和vue-cli3 安装完后的 项目目录不一样
5安装指定版本的vue
npm install -g @vue/ cli@3121
vue-cli30项目目录结构
vue-cli20项目目录结构
vue-cli4515 的vue2项目目录
在开发过程中，经常会设置端口和IP之类的，而且开发和生成环境会不一样，如果每次发布都要修改配置，会非常的不方便，而且有时会忘记修改。在vue项目中，有两个配置文件，分别为 devenvjs 、 prodenvjs 。下面是 devenvjs 的内容：
BASE_URI 是服务器的api路径，我们在 devenvjs 和 prodenvjs 都配置一个，这样我们在使用的时候，直接通过 processenvBASE_URI 获取就可以了，不用担心切换环境导致的问题了。
vue 获取当前位置经纬度（浏览器定位）
在vue中使用高德地图，获取定位
我这个网页，需要放在安卓app内，因为安卓的webview是谷歌内核，所以不会支持，最后我使用了百度地图，发现是可以的
Vue实现城市定位（利用百度地图
我这边有改动，我需要根据经纬度来转换到具体的地址。要先去申请ak，这个看官方文档
JavaScript API GL
在public文件夹下的indexhtml中引入百度的引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta base="/" id="base" />
<meta charset="utf-8" />
<meta >
我们开发时经常会出现，测试环境线上环境等等切换或打包的情况，这时候自然会用上这个Node自带的Process对象
一般我们用vuecli这类脚手架，在打包部署的配置中即可看到对Processenv的设置
Windows 设置环境变量
直接在CMD中运行即可
查看环境变量，添加环境变量，删除环境变量
set NODE_ENV
set NODE_ENV=production
set 变量名=%变量名%;变量内容
set path=%path%;C:\web;C:\Tools
set NODE_ENV=
Linux 设置环境变量
临时
查看环境变量，添加环境变量，删除环境变量
echo $NODE_ENV
export NODE_ENV=production
export path=$path:/home/download:/usr/local/
unset NODE_ENV
env
永久
系统文件的读取顺序和位置如下：
/etc/profile
~/bash_profile
在文件末尾添加类似如下语句进行环境变量的设置或修改
export path=$path:/home/download:/usr/local/
修改完成后需要运行如下语句令系统重新加载
source /etc/profile
source bash_profile
MacOS 设置环境变量
临时
查看环境变量，添加环境变量，删除环境变量
echo $NODE_ENV
export NODE_ENV=production
export PATH=$PATH:/home/download:/usr/local/
unset NODE_ENV
env
永久
系统文件的读取顺序和位置如下：
/etc/profile
~/bash_profile
在文件末尾添加类似如下语句进行环境变量的设置或修改
export PATH=$PATH:/home/download:/usr/local/
修改完成后需要运行如下语句令系统重新加载
source /etc/profile
source bash_profile
查看文档
Vue Loader 是一个 webpack 的 loader(在vue-cli中已自动集成)，以下功能都依赖于Vue Loader:
当 Vue Loader 编译单文件组件中的 <template> 块时，它也会将所有遇到的资源 URL 转换为 webpack 模块请求 。因此动态添加/更改的资源非绝对路径需要使用 require 处理。
默认下列标签/特性的组合会被转换，且这些组合时可以使用 transformAssetUrls 选项进行配置的。
( 如配置额外的 <style> 块使用 css-loader ，也可以使 CSS 中的资源 URL 变成模块请求。)
Vue Loader 会根据 lang 特性以及你 webpack 配置中的规则自动推断出要使用的其他 loader。
有些预处理器对 >>> 不支持，此时可以使用 /deep/ 或 ::v-deep *** 作符取而代之——两者都是 >>> 的别名。
或直接
可自行在 processenv 对象下定义需要使用的变量
一般约定 NODE_ENV 为环境变量名称
在项目中可以根据不同环境值进行差异化配置
在vue-cli3构建的项目中,默认 num run start 环境值为 development , num run build 环境值为 production ,当需要其他环境时,可安装 cross-env 插件
并在packagejson中进行如下配置
则 npm run test 时,获取的环境值即为 test
在根目录下创建 vueconfigjs 中进行配置
以上就是关于vue项目中，解决开发与线上 请求接口不同的问题全部的内容，包括:vue项目中，解决开发与线上 请求接口不同的问题、VUE打包区分生产和测试环境、vue2/vue3环境搭建等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）