手写vite插件之在index.html中根据不同的环境来使用不同的值

本文链接：https://blog.csdn.net/lth002/article/details/137551814

一、编写插件

export default (config={}) => {
  let currentMode;
  return {
    //用于获取当前的mode
    config(config,{mode}){
        currentMode = mode;
    },
    transformIndexHtml: {
      order:"pre",
      handler(html) {
        let data = config[currentMode];
        let repStr = /<%lth([\d\D]+?)(%>)/g;
        html = html.replace(repStr, (content, p1) => {
          p1 = p1.replace(/\s/g,"");  //去除空格
          let variableList = p1.split(".");
          let value = variableList.reduce((pre,next)=>{
            return pre[next]
          },data);
          return typeof value === 'number' ? value : `"${value}"`;
        });
        return html;
      },
    },
  };
};

二、vite.config.ts文件中引入插件

import vitePluginLthHtml from "./plugin/vite-plugin-lth-html.ts";
export default defineConfig({
	plugins: [
		vitePluginLthHtml({
	      development: { //这里取决于你执行的命令里的--mode xxx
	        minemap: {
	          domainUrl: "xxx",
	          dataDomainUrl: "xxx",
	          serverDomainUrl: "xxx",
	          srcUrl: "xxx",
          	  cssUrl:"xxx",
	        },
	      },
	      production: {  //这里取决于你执行的命令里的--mode xxx
	        minemap: {
	          domainUrl: "aaa",
	          dataDomainUrl: "bbb",
	          serverDomainUrl: "ccc",
	          srcUrl: "ddd",
          	  cssUrl:"ddd",
	        },
	      },
	      test: {  //这里取决于你执行的命令里的--mode xxx
	        minemap: {
	          domainUrl: "aaa",
	          dataDomainUrl: "bbb",
	          serverDomainUrl: "ccc",
	          srcUrl: "ddd",
          	  cssUrl:"ddd",
	        },
	      },
	    }),]
})

三、使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="transparent" content="true" />
    <meta name="theme-color" content="#000000" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link
      rel="stylesheet"
      href=<%lth minemap.cssUrl %>
    />
    <script src=<%lth minemap.srcUrl %>></script>
    <title>自定义插件</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script>
      minemap.domainUrl = <%lth minemap.domainUrl %>;
      minemap.dataDomainUrl = <%lth minemap.dataDomainUrl %>;
      minemap.serverDomainUrl = <%lth minemap.serverDomainUrl %>;
    </script>
  </body>
  <style>
    body {
      background-color: rgba(0, 0, 0, 0);
      user-select: none;
    }
  </style>
</html>

在index.html文件中使用<%lth xxx %>来代替变量

package.json命令

 "scripts": {
    "serve": "vite",  //默认development
    "test": "vite --mode test",  //对应vite.config.ts里面的test对象
    "build": "vite build", //默认production
  },