您的位置:

config中dev.env.js,Configs

config中dev.env.js,Configs

更新:

本文目录一览:

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项目名。

config中dev.env.js,Configs

本文目录一览: 1、vue项目中,解决开发与线上 请求接口不同的问题 2、vue中dev.env.js和prod.env.js 是什么有什么区别和关系? 3、本地运行vue dist文件 4、从线上拉

2023-12-08
Configs: 让配置中心成为开发的坚强后盾

2023-05-19
Vue中config的配置详解

2023-05-16
java笔记,大学java笔记

2022-11-28
java笔记,尚硅谷java笔记

2022-12-01
java学习笔记(java初学笔记)

2022-11-14
印象笔记记录java学习(Java成长笔记)

2022-11-12
发篇java复习笔记(java课程笔记)

2022-11-09
重学java笔记,java笔记总结

2022-11-23
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
javascript简要笔记,JavaScript读书笔记

2022-11-17
java客户端学习笔记(java开发笔记)

2022-11-14
.config文件在Linux中的应用

2023-05-19
java包笔记,Java语言包

2022-11-18
java基础第一天学习笔记(java课程笔记)

2022-11-09
java基础知识学习笔记一,Java基础笔记

2022-11-21
java方法整理笔记(java总结)

2022-11-08
vue3没有configjs(vue3没有config)

本文目录一览: 1、vue3.0和2.0的区别是什么? 2、vue2.0和3.0区别 3、基于Vue3+TS+ElementPlus+Qiankun构建微应用项目 4、通俗易懂讲解vue.config

2023-12-08
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
java学习的一些基础笔记(java初学笔记)

2022-11-14