插件地址：
https://www.npmjs.com/package/vite-plugin-ejs
安装：
cnpm install vite-plugin-ejs --save -dev
使用：
//vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { ViteEjsPlugin } from 'vite-plugin-ejs'
export default defineConfig({
plugins: [
vue(),
ViteEjsPlugin(),
],
})
使用前index.html打包：
使用后index.html打包：
当然你也可以使用变量：
//vite.config.ts
import {defineConfig} from "vite";
import {ViteEjsPlugin} from "vite-plugin-ejs";
export default defineConfig({
plugins: [
// Without Data
ViteEjsPlugin(),
// With Data
ViteEjsPlugin({
domain: "example.com",
title: "My vue project!"
}),
// Or With Vite Config
ViteEjsPlugin((viteConfig) => {
// viteConfig is the current viteResolved config.
return {
root: viteConfig.root,
domain: "example.com",
title: "My vue project!"
}
}),
],
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title><%= domain %> | <%= title %></title>
<!-- Run Conditions-->
<% if(isDev){ %>
<script src="/path/to/development-only-script.js"></script>
<% } else { %>
<script src="/path/to/production-only-script.js" crossorigin="anonymous"></script>
<% } %>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
默认包含的数据：
return {
NODE_ENV: config.mode,
isDev: config.mode === "development"
}
网友评论