首页 新闻 会员 周边 捐助

vue打包之后生成一个配置文件可以修改接口中的地址

0
悬赏园豆:40 [待解决问题]

现在遇到一个问题就是vue在开发环境下自己在static文件夹下创建了一个配置文件里面写了接口地址,用const serverconfig = require('../static/config.json')方式将配置文件引入到dev.env.js(开发环境下)测了一下配置文件中的接口地址是可以修改掉开发环境中的接口地址,但是打包之后再修改生产环境中的接口地址时就修改不掉了,前提是用相同的方式在生产环境的js中也引入了配置文件,打包之后修改不掉,求解?

清风白衣烈酒为伴的主页 清风白衣烈酒为伴 | 初学一级 | 园豆:114
提问于:2019-10-18 10:58
< >
分享
所有回答(3)
1

首次打包是好的吗?只是修改不生效??有点奇怪

c-137Summer | 园豆:202 (菜鸟二级) | 2019-10-18 11:11

对对,就是打包之后是好的,但就是修改配置文件中的接口地址时就修改不掉

支持(0) 反对(0) 清风白衣烈酒为伴 | 园豆:114 (初学一级) | 2019-10-18 11:13

@清风白衣烈酒为伴: 会不会是缓存...强刷行吗。。按说如果在打包之前修改再打包也就是和打包之后修改一样的只改掉了地址而已

支持(0) 反对(0) c-137Summer | 园豆:202 (菜鸟二级) | 2019-10-18 11:16

@c-137Summer: 嗯嗯好的我试试

支持(0) 反对(0) 清风白衣烈酒为伴 | 园豆:114 (初学一级) | 2019-10-18 11:18
1

大概率缓存吧,给文件都加上hash码试试吧

wings-lhw | 园豆:366 (菜鸟二级) | 2019-10-18 11:36

嗯嗯

支持(0) 反对(0) 清风白衣烈酒为伴 | 园豆:114 (初学一级) | 2019-10-18 11:39
1

dev.env.js 和 prod.env.js 都是 webpack 配置文件。并非前端文件。。

打包后,只是纯静态的文件,和webpack没有关系了。

process 原本是 node 的当前进程,上面可以拿到一些环境和配置

前端能拿到 process ,是因为 webpack.DefinePlugin 这个插件,将这个变量内容,打包进了前端代码。
在 开发环境 process.env.NODE_ENV 是 development
打包后,一般默认是生产环境, process.env.NODE_ENV 是 production

如果需要配置请求的域名可以

var host = process.env.NODE_ENV == "production" ? "xxxx" : "xxxxxx"

muamaker | 园豆:763 (小虾三级) | 2019-10-19 16:50

哪这个判断应该写在那个位置比较好

支持(0) 反对(0) 清风白衣烈酒为伴 | 园豆:114 (初学一级) | 2019-10-21 09:42

你好我想问一下,在vue2.9.0以上可以在打包之后可以生成一个配置文件修改生产环境的接口地址的文件吗?

支持(0) 反对(0) 清风白衣烈酒为伴 | 园豆:114 (初学一级) | 2019-10-21 11:11

@清风白衣烈酒为伴: 可以在 你封装 axios 的地方判断环境,确定接口的地址。

如果你有一堆配置的话,建议直接在 index.html 里面,window.config = {}; 全局配置吧,
这样最简单了。

如果你想像后端服务器一样,专门写个配置,然后再修改,你可以在 index.html 里面引入 一个自己的 config.js。。。

最后,你可以使用 vue-cli 3.0 ..直接配置各种变量,当然也是基于webpack.DefinePlugin 插件的,修改配置以后,需要重新打包。

支持(1) 反对(0) muamaker | 园豆:763 (小虾三级) | 2019-10-21 13:43

@muamaker: 你好我想问一下,我在static文件夹中添加了一个config.js里面写了 要配置的接口地址,然后在封装的api 的js中判断是生产环境还是开发环境,然后跟换接口地址,打包之后会生成一个配置文件可以修改接口地址,但是把打包之后的文件夹放到后台的文件夹下启动服务之后修改配置文件接口的地址是修改不掉的,但是和后台的文件放在同级下修改就是可以修改的,这是为什么?

支持(0) 反对(0) 清风白衣烈酒为伴 | 园豆:114 (初学一级) | 2019-10-21 14:54

@清风白衣烈酒为伴: 那你不要使用 import 和 require 引入 config.js , 因为这样打包的时候,是 webpack 直接打包到代码里面的,和你放在哪里没有关系,既然已经打包进去了,你再修改config.js 没有意义。因为 webpack 默认会把 static 下面的文件全部copy 到打包的目录。。。

这个时候,你应该 在 index.html 文件加入 script 标签,引入 config.js
如:
<script type="text/javascript" src="/static/js/config.js"></script>

支持(1) 反对(0) muamaker | 园豆:763 (小虾三级) | 2019-10-21 16:14

@muamaker: 好的,谢谢你的指导

支持(0) 反对(0) 清风白衣烈酒为伴 | 园豆:114 (初学一级) | 2019-10-21 16:58

@muamaker:我按照您给的方式去做了现在是可以修改的但是有一个问题就是在index.html中用<script type="text/javascript" src="/static/js/config.js"></script>这样的方式的话会出现打包之后找不到config.js文件,但是修改为<script type="text/javascript" src="dist/static/js/config.js"></script>就可以但是这样的话就会出现在开发环境下出现路径报错的问题这个怎么解决呀

支持(0) 反对(0) 清风白衣烈酒为伴 | 园豆:114 (初学一级) | 2019-10-22 11:33

@muamaker: 主要是因为我们用的是jenkins部署的所以是自动的这样手动去修改好像不是很合适呀,这个该怎么去处理一下比较合适

支持(0) 反对(0) 清风白衣烈酒为伴 | 园豆:114 (初学一级) | 2019-10-22 11:35
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册