侧边栏壁纸
博主头像
小武哥博主等级

爱璐璐真是太好了

  • 累计撰写 43 篇文章
  • 累计创建 56 个标签
  • 累计收到 3 条评论

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

小武哥
2021-12-17 / 0 评论 / 0 点赞 / 79 阅读 / 1,033 字
温馨提示:
本文最后更新于 2021-12-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

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

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

  1. 在public文件夹创建sp_config_development.js,与sp_config_production.js两个文件,将我们需要外提的配置写在该文件中

    window.SPCONFIG={
        BASE_URL:'/api', //api请求路径
        TIME_OUT:5000 //接口超时时间
    }
    
  2. 在index.html中引用该js

      <body>
    	....
        <script src="./sp_config_<%=process.env.NODE_ENV%>.js?t=<%= new Date().getTime() %>"></script>
        <div id="app"></div>
      </body>
    
  3. 在我们需要使用配置时直接引用

    const service = axios.create({
      baseURL: window.SPCONFIG.BASE_URL,  
      timeout: window.SPCONFIG.TIME_OUT // request timeout
    })
    
  4. ​ 当我们在开发环境使用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
    
0

评论