vite+vue3项目采用ejs语法配置cdn引入在线依赖

钱厚端

已于 2023-08-28 09:52:31 修改

阅读量1.8k

点赞数 3

分类专栏：前端JS框架：vue3 文章标签： vue.js 前端 javascript

于 2023-08-17 09:46:58 首次发布

本文链接：https://blog.csdn.net/qq_42618566/article/details/132333865

版权

前端JS框架：vue3 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vite项目中使用ViteEjsPlugin来安装并配置EJS语法，以及如何通过ejsData暴露变量到HTML模板中，实现CSS和JS文件的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

采用ejs的方式

安装语法依赖

npm install vite-plugin-ejs -D

配置暴露数据

vite.config.js文件：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { ViteEjsPlugin } from 'vite-plugin-ejs'







const ejsData = {
  // ejs读取环境变量
  ENV: loadEnv(process.env.VITE_USER_NODE_ENV, process.cwd(), ''),
  // CDN外链，ejs会插入到index.html中
  CDNs: {
    css: [
      "https://unpkg.com/animate.css@4.1.1",
      "https://unpkg.com/bootstrap@5.3.1/dist/css/bootstrap.min.css",
      "https://unpkg.com/bootstrap-icons@1.10.0/font/bootstrap-icons.css"
    ],
    js: [
      "https://unpkg.com/@popperjs/core@2.11.6/dist/umd/popper.min.js",
      "https://unpkg.com/bootstrap@5.3.1/dist/js/bootstrap.min.js"
    ]
  }
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    ViteEjsPlugin(ejsData)
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

看到ViteEjsPlugin(ejsData)了吗，就是这个方法，把你定义的ejsData变量暴露到了index.html文件

使用数据

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/logo.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= ENV.VITE_APP_TITLE %></title>
      <% for (let path of CDNs.css) { %>
        <link href="<%= path %>" rel="preload" as="style" />
        <link href="<%= path %>" rel="stylesheet" />
      <% } %>
  </head>
  <body>
    <div id="app"></div>

    <script type="module" src="/src/main.js"></script>
    <% for (let path of CDNs.js) { %>
      <script defer src="<%= path %>"></script>
    <% } %>
  </body>
</html>