使用vue+webpack创建项目的时候会自动生成一个static文件夹,在static文件夹里面我们可以放一些会经常变化的文件或者照片啥的,但是用的时候需要写上绝对路径。由于项目需要,在开发时的接口地址跟部署的接口地址不一致,所以我们要弄成可配置的,即单独出来一个js文件放我们的接口地址,然后希望该js文件不被打包进去,同时也就希望这个js文件里面的内容不被打包,这样在项目打包后我们也可以对接口进行修改。
1、在static目录下新建一个js文件来存放我们的接口地址
上面的apiUrl放置了开发时的接口地址
2、我们需要把接口地址作为全局变量使用,在项目的根目录下创建.eslintrc.json文件来放置我们的全局变量
设置为false是说明该变量为可读而不可写的,为true就是可写的
3、接下来就是在index.html页面使用script标签引入该文件了,不可以使用import或者是require,如果使用了那么文件中的内容在其他模块中使用的时候也会被一起打包进去,所以尽管打包后更改了apiUrl.js里面的内容配置也不会起效果。
4、最后就可以在其他模块直接使用这个全局变量啦,但是由于加载的顺序问题,我们在其他模块引用这个全局变量的时候,我们插入的这个script标签的内容还没有被加载出来(所以后面打包完后需要更改一下加载顺序,后续讲到)
用typeof判断该变量是否已经引入了,避免还没引入的时候使用而报错。
5、打包,打包前我们需要更改一下我们的生产环境(不同于开发环境)的publicPath,避免放到服务器的时候路径不一致
6、运行npm run build打包后会发现我们的apiUrl会自动的放到static/js文件夹下,不需要我们手动放进去,打包后的文件都放在dist目录下
手动把引入的文件提到第一个script标签
7、最后就可以把我们的dist文件夹下的东西放到服务器部署啦,接口地址改变的时候直接修改apiUrl.js里面的内容就可以啦。
perfect.