本文目录一览：
- 1、vue项目中，解决开发与线上 请求接口不同的问题
- 2、vue中dev.env.js和prod.env.js 是什么有什么区别和关系？
- 3、本地运行vue dist文件
- 4、从线上拉的Vue代码，直接运行报下面的错误
- 5、vue2.0和3.0区别
vue项目中，解决开发与线上 请求接口不同的问题
在Vue开发当中经常会遇到各种各样的接口问题,最近在项目中遇到开发和线上环境接口路径不一样的问题,网上找到很多博客,大多都是千篇一律的复制粘贴,对于新手来说可能比较难以理解,所以我写这篇博客分享给刚使用vue做项目的小萌新同学一个详细的接口配置思路。
webpack提供了生产环境和线上环境的两种配置文件,平时开发当中使用一个接口,项目上线后就会自动切换成另外一个接口,废话不多说,下面上图。首先是找到vue-cli项目中config文件夹下的dev.env.js,默认是下面的样子:
然后我们需要添加开发环境中使用的请求后台数据的接口域名,如下图:
url_api是我自己设置的,可以自定义。后面的路径就是你自己开发环境中的接口。
接着找到prod.env.js,默认如下图:
在这个文件中同样添加线上请求接口的配置:
最后在自己封装的axios中去调用这个接口:
自定义变量 = process.env.url_api(这个就是刚才在config两个文件中自定义的),拼接url到封装的axios中。最后在生产环境中npm run dev 的时候会自动调用刚才在dev.env.js中定义的接口,当使用npm run build 去打包的时候会自动调用prod.env.js中配置的接口。
另外:跨域的问题
可能有些小伙伴在vue中配置了跨域的代理,所以导致拼接url中proxy代理失效,依然出现跨域的问题,解决这个问题我的个人思路是代理配置不变,只需要在dev.env.js中用空字符串替换本地接口。就不会出现开发环境中跨域的问题了。有不明白的可以问我,有更好的方案也希望能不吝赐教,谢谢。
链接：
vue中dev.env.js和prod.env.js 是什么有什么区别和关系？
一个是开发环境，一个是生产环境。
dev是开发的意思，prod是生产的意思。两者的配置可以相同，也可以不同。一般情况下是不相同的，所以需要分开设置。
dev环境会包含测试、调试所需要的文件，生产环境只会包含正式上线发布所包含的文件。
本地运行vue dist文件
当我们vue工作完成以后会打包一份dist文件给后台，之前本地肯定要测试一下，下面就是本人踩的一些坑，跟大家分享一下
a) 我们打包为dist以后第一个问题，我们打包为dist以后经常会遇见路径出错，也就是dom出现但是js与css不会出现，显示路径错误。
解决方法：打开脚手架的config文件中的index.js文件，查看build对象内的assetsPublicPath(发布路径)是否为"./"。默认的情况下是"/"，但是"/"是绝对路径，而"./"是相对路径
绝对路径：就是你的主页上的文件或目录在硬盘上真正的路径，比如c:/apache/cgi-bin下的路径就是c:/apache/cgi-bin;
相对路径：顾名思义就是相对于当前文件的路径
b)路径没有问题了。文件可以引入进来了，那么怎么本地运行呢，因为dist文件是要有服务启动的，一本情况下后台会启动服务，但是总不能每一次都让后台打包吧
解决方法：
1.这是dev内设置服务代理，
proxyTable: {
'/api': { //代理地址
target: '', //需要代理的地址
changeOrigin: true, //是否跨域
secure: false, // 如果是https接口，需要配置这个参数
pathRewrite: {
'^/api': '/api' //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
},
},
},
2.配置开发环境与生产环境
在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST
module.exports = merge(prodEnv, {
NODE_ENV: '"development"', // 开发环境
API_HOST: '"/api/"'
})
module.exports = {
NODE_ENV: '"production"', // 生产环境
API_HOST: '""'
}
3.调用
created() {
console.log(process.env.NODE_ENV, '环境')
let urlHost = process.env.API_HOST // 会自动判断当前是开发还是生产环境，然后自动匹配API_HOST
axios.get(urlHost + 'DemoApi/oftenGoods.php')
.then((res) = {
console.log(res, '代理之后')
})
}
好了，就这么多配置本地运行dist文件的方法大家git到了吗
从线上拉的Vue代码，直接运行报下面的错误
配置通用的API前缀可以更好在本地通过接口代理转发获取数据、或者部署时在Nginx中做反向代理，但是项目中一旦涉及大量的需要文件上传的部分（文件上传不走Ajax的方法），我们需要考虑更好管理接口的baseURL，项目中 Ajax 请求用 axios ，原始代码如下
修改前
// 创建axios实例、配置baseURL、超时时间 const service = axios.create({ baseURL: '/development/api', // 从环境进程中根据运行环境获取的api的base_url timeout: 5000 // 请求超时时间 }) /* 保存分配角色 */ export function fetchSaveDisUser (params1) { return fetch({ url: '/user/empower', method: 'post', params: params1, paramsSerializer: function (params) { return Qs.stringify(params, { arrayFormat: 'repeat' }) } }) } /* 上传文件URL 从运行环境process.env中读取API配置 */ export let uploadUrl = '/development/api/doi/analys/upload'
优化方法
找到config/dev.env.js 和 config/prod.env.js，在代码添加变量 API_BASEURL（名字自定义）如下：
module.exports = { NODE_ENV: '"production"', // PS:不要复制、开发环境和生产环境有区别 API_BASEURL: '"/development/api/"' // 需要自己添加的代码 }
然后在需要使用baseURL的地方替换为 process.env. API_BASEURL
修改后代码如下
// 创建axios实例、配置baseURL、超时时间 const service = axios.create({ baseURL: process.env.API_BASEURL, // 从环境进程中根据运行环境获取的api的base_ur timeout: 500
vue2.0和3.0区别
项目目录不同
1、vue-cli3.o移除了config.文件夹。
2、多了vue.config.js文件。
3、新增了一个views文件夹。
4、删除了static新增了public文件夹。
5、index.html移动到public了。
配置项不同
1、vue-cli2.0的域名配置，分为开发环境和生产环境。
2、所以配置域名时，需要在config中的dev.env.js和。
3、prod.env.js中分别配置3.0 config.文件已经被移除。
4、但是多了。env.production和env.development文件。
5、除了文件位置，实际配置起来和2.没什么不同。
创建项目的方式不一样
1、vue-cli2.0，vue init webpack项目名。
2、vue-cli3.0 vue create项目名。