Vue项目配置文件外提,线上修改配置无需重新打包

小半 • 2024年3月11日下午2:55 • 技术漫谈 • 阅读 285

    在实际生产过程中，vue项目部署到服务器之后，接口地址等配置需要变动时，使用vue自带.env.dev配置的方式，需要重新打包发布。如何做到提供配置文件，使得前端在部署后，仍然可以手动修改呢?

    本文思路在public目录下提供一个JS环境配置文件，然后在index.html引用该文件，既可以完成配置文件外提。

    因为在Vue-Cli打包时，会认为在public目录下的文件是静态的，打包时会复制到dist根目录下，不会进行处理。

在public文件夹创建sp_config_development.js，与sp_config_production.js两个文件,将我们需要外提的配置写在该文件中
```
window.SPCONFIG={
    BASE_URL:'/api', //api请求路径
    TIME_OUT:5000 //接口超时时间
}
```

在index.html中引用该js

  <body>
    <script src="./sp_config_<%=process.env.NODE_ENV%>.js
     ?t=<%= new Date().getTime() %>"></script>
    <div id="app"></div>
  </body>

在我们需要使用配置时直接引用

const service = axios.create({
  baseURL: window.SPCONFIG.BASE_URL,  
  timeout: window.SPCONFIG.TIME_OUT // request timeout
})

当我们在开发环境使用npm run dev命令使用，index.html会引用sp_config_development.js文件，并且当我们修改配置时能够自动刷新配置。

当我们使用npm run build命令时index.html会引用sp_config_production.js文件。这两个配置文件在打包时会外提，部署到服务器后能够很方便直接修改配置js文件。注意在npm run dev,npm run build命令后不能再加–mode 等配置,不然process.env.NODE_ENV会无效。
```
dist/
 static/
   xxx.js
   xxx.css
 index.html
 sp_config_development.js
 sp_config_production.js
 favicon.ico
```