”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 多页 Vite Vanilla JavaScript

多页 Vite Vanilla JavaScript

发布于2024-08-05
浏览:721

Multipage Vite Vanilla JavaScript

源代码:https://github.com/mochamadboval/multipage-vite-vanilla-js

主要配置

创建一个 Vite Vanilla JavaScript 项目。

npm create vite@latest multipage-vite-vanilla-js -- --template vanilla

cd multipage-vite-vanilla-js
npm i

自定义项目文件夹结构如下。

|- node_modules/
|- src/
   |- assets/
      |- img/
         |- javascript.svg
      |- js/
         |- counter.js
   |- public/
      |- vite.svg
   |- index.html
   |- main.js
   |- style.css
|- .gitignore
|- package-lock.json
|- package.json

由于index.html不再位于主项目文件夹中,因此无法执行npm run dev。因此,创建一个 vite.config.js 文件并将新的 root 路径设置为 src 文件夹。这只适用于执行 npm run dev 和 npm run build 命令时。

// vite.config.js

export default {
  root: "./src",
};

进行如下调整,将CSS导入方式移至HTML。

// ./src/main.js

import { setupCounter } from "./assets/js/counter";

import viteLogo from "/vite.svg";
import javascriptLogo from "./assets/img/javascript.svg";

document.querySelector("#app").innerHTML = `
  
  ...   ...     About |     Article  
`; setupCounter(document.querySelector("#counter"));


  Vite App
  

现在我们可以执行 npm run dev 命令了。但是,当运行 npm run build 时,将在 src 文件夹中创建 dist 文件夹。要将其移出该文件夹,请添加以下配置。

// vite.config.js

export default {
  root: "./src",
  build: {
    outDir: "../dist",
    emptyOutDir: true,
  },
};

我们仍然可以使用 npm run Preview 命令来运行 dist 文件夹,因为 root: "./src" 不会影响它(它仍然指向主项目文件夹)。

接下来,我们在src文件夹中创建about.html,在blog文件夹中创建article.html。





  
    
    
    
    About | Multipage Vite Vanilla JavaScript
    
  
  
    
     

About page.

   
 




  
    
    
    
    Article | Multipage Vite Vanilla JavaScript
    
  
  
    
     

Article page.

   
 

然后,添加以下配置,以便在 dist 文件夹中也创建这两个文件。

// vite.config.js

export default {
  root: "./src",
  build: {
    outDir: "../dist",
    emptyOutDir: true,
    rollupOptions: {
      input: {
        index: "./src/index.html",
        about: "./src/about.html",
        article: "./src/blog/article.html",
      },
    },
  },
};

现在项目已成功多页。

但是,您可能已经注意到,每次创建新的 HTML 文件时,我们都需要在输入中添加新路径。如果您希望它动态工作,让我们安装 glob 包并添加以下配置。

npm install -D glob
// vite.config.js

import { sync } from "glob";

export default {
  ...
  build: {
    ...
    rollupOptions: {
      input: sync("./src/**/*.html".replace(/\\/g, "/")),
    },
  },
};

可以改进和补充的地方:

“404 未找到”页面

当我们写错url时,显示的页面是主页面。我们可以让它显示默认的“未找到”页面。

// vite.config.js

export default {
  appType: "mpa",
  root: "./src",
  ...

如果我们将项目部署到 Netlify,我们可以轻松地将默认的“Not Found”页面重定向到我们自己的 404 页面。

在src文件夹中创建404.html,并在public文件夹中创建_redirects文件(不带扩展名)。





  
    
    
    
    Page not found | Multipage Vite Vanilla JavaScript
    
  
  
    
     

Page not found.

   
 
_redirects

/* /404.html 200

缩小 HTML

我们可以使用此插件在构建过程中缩小所有 HTML 文件(请告诉我是否可以在没有插件的情况下做到这一点)。

npm install -D vite-plugin-minify
// vite.config.js

...
import { ViteMinifyPlugin } from "vite-plugin-minify";

export default {
  plugins: [ViteMinifyPlugin()],
  appType: "mpa",
  ...

创建路径别名

// vite.config.js

...
import { resolve } from "path";

export default {
  resolve: {
    alias: {
      "@js": resolve(__dirname, "src/assets/js"),
    },
  },
  plugins: [ViteMinifyPlugin()],
  ...
// ./src/main.js

import { setupCounter } from "@js/counter";

import viteLogo from "/vite.svg";
...

要在文本编辑器 (VS Code) 中启用自动建议,请创建 jsconfig.json 文件并添加此配置。

// jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@js/*": ["./src/assets/js/*"]
    }
  }
}

安装 TailwindCSS

可以按照官方文档进行操作。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
// poscss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
/* ./src/style.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

root: {
  ...

要在使用 Prettier 时自动对 TailwindCSS 类进行排序,您可以按照此文档进行操作。

npm install -D prettier prettier-plugin-tailwindcss
// .prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

希望对你有帮助:)

来源:

  • https://vitejs.dev/guide/#scaffolding-your-first-vite-project
  • https://vitejs.dev/guide/build.html#multi-page-app
  • https://stackoverflow.com/a/66877705
  • https://github.com/isaacs/node-glob
  • https://www.npmjs.com/package/vite-plugin-minify
版本声明 本文转载于:https://dev.to/mochamadboval/multipage-vite-vanilla-javascript-3i0l?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 解决Spring Security 4.1及以上版本CORS问题指南
    解决Spring Security 4.1及以上版本CORS问题指南
    弹簧安全性cors filter:故障排除常见问题 在将Spring Security集成到现有项目中时,您可能会遇到与CORS相关的错误,如果像“访问Control-allo-allow-Origin”之类的标头,则无法设置在响应中。为了解决此问题,您可以实现自定义过滤器,例如代码段中的MyFi...
    编程 发布于2025-04-27
  • 如何在php中使用卷发发送原始帖子请求?
    如何在php中使用卷发发送原始帖子请求?
    如何使用php 创建请求来发送原始帖子请求,开始使用curl_init()开始初始化curl session。然后,配置以下选项: curlopt_url:请求 [要发送的原始数据指定内容类型,为原始的帖子请求指定身体的内容类型很重要。在这种情况下,它是文本/平原。要执行此操作,请使用包含以下标头...
    编程 发布于2025-04-27
  • Java为何无法创建泛型数组?
    Java为何无法创建泛型数组?
    通用阵列创建错误 arrayList [2]; JAVA报告了“通用数组创建”错误。为什么不允许这样做?答案:Create an Auxiliary Class:public static ArrayList<myObject>[] a = new ArrayList<myO...
    编程 发布于2025-04-27
  • 我可以将加密从McRypt迁移到OpenSSL,并使用OpenSSL迁移MCRYPT加密数据?
    我可以将加密从McRypt迁移到OpenSSL,并使用OpenSSL迁移MCRYPT加密数据?
    将我的加密库从mcrypt升级到openssl 问题:是否可以将我的加密库从McRypt升级到OpenSSL?如果是这样,如何?答案:是的,可以将您的Encryption库从McRypt升级到OpenSSL。可以使用openssl。附加说明: [openssl_decrypt()函数要求iv参...
    编程 发布于2025-04-27
  • 如何在GO编译器中自定义编译优化?
    如何在GO编译器中自定义编译优化?
    在GO编译器中自定义编译优化 GO中的默认编译过程遵循特定的优化策略。 However, users may need to adjust these optimizations for specific requirements.Optimization Control in Go Compi...
    编程 发布于2025-04-27
  • 如何从2D数组中提取元素?使用另一数组的索引
    如何从2D数组中提取元素?使用另一数组的索引
    Using NumPy Array as Indices for the 2nd Dimension of Another ArrayTo extract specific elements from a 2D array based on indices provided by a second ...
    编程 发布于2025-04-27
  • 在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在JTable中维护jtable单元格渲染后,在JTable中,在JTable中实现自定义单元格渲染和编辑功能可以增强用户体验。但是,至关重要的是要确保即使在编辑操作后也保留所需的格式。在设置用于格式化“价格”列的“价格”列,用户遇到的数字格式丢失的“价格”列的“价格”之后,问题在设置自定义单元格...
    编程 发布于2025-04-27
  • 哪种方法更有效地用于点 - 填点检测:射线跟踪或matplotlib \的路径contains_points?
    哪种方法更有效地用于点 - 填点检测:射线跟踪或matplotlib \的路径contains_points?
    在Python Matplotlib's path.contains_points FunctionMatplotlib's path.contains_points function employs a path object to represent the polygon.它...
    编程 发布于2025-04-27
  • 解决MySQL插入Emoji时出现的\\"字符串值错误\\"异常
    解决MySQL插入Emoji时出现的\\"字符串值错误\\"异常
    Resolving Incorrect String Value Exception When Inserting EmojiWhen attempting to insert a string containing emoji characters into a MySQL database us...
    编程 发布于2025-04-27
  • 在JavaScript中如何并发运行异步操作并正确处理错误?
    在JavaScript中如何并发运行异步操作并正确处理错误?
    同意操作execution 在执行asynchronous操作时,相关的代码段落会遇到一个问题,当执行asynchronous操作:此实现在启动下一个操作之前依次等待每个操作的完成。要启用并发执行,需要进行修改的方法。 第一个解决方案试图通过获得每个操作的承诺来解决此问题,然后单独等待它们: co...
    编程 发布于2025-04-27
  • 为什么PYTZ最初显示出意外的时区偏移?
    为什么PYTZ最初显示出意外的时区偏移?
    与pytz 最初从pytz获得特定的偏移。例如,亚洲/hong_kong最初显示一个七个小时37分钟的偏移: 差异源利用本地化将时区分配给日期,使用了适当的时区名称和偏移量。但是,直接使用DateTime构造器分配时区不允许进行正确的调整。 example pytz.timezone(...
    编程 发布于2025-04-27
  • 查找当前执行JavaScript的脚本元素方法
    查找当前执行JavaScript的脚本元素方法
    如何引用当前执行脚本的脚本元素在某些方案中理解问题在某些方案中,开发人员可能需要将其他脚本动态加载其他脚本。但是,如果Head Element尚未完全渲染,则使用document.getElementsbytagname('head')[0] .appendChild(v)的常规方...
    编程 发布于2025-04-27
  • 如何从PHP中的数组中提取随机元素?
    如何从PHP中的数组中提取随机元素?
    从阵列中的随机选择,可以轻松从数组中获取随机项目。考虑以下数组:; 从此数组中检索一个随机项目,利用array_rand( array_rand()函数从数组返回一个随机键。通过将$项目数组索引使用此键,我们可以从数组中访问一个随机元素。这种方法为选择随机项目提供了一种直接且可靠的方法。
    编程 发布于2025-04-27
  • 为什么Microsoft Visual C ++无法正确实现两台模板的实例?
    为什么Microsoft Visual C ++无法正确实现两台模板的实例?
    The Mystery of "Broken" Two-Phase Template Instantiation in Microsoft Visual C Problem Statement:Users commonly express concerns that Micro...
    编程 发布于2025-04-27
  • Android如何向PHP服务器发送POST数据?
    Android如何向PHP服务器发送POST数据?
    在android apache httpclient(已弃用) httpclient httpclient = new defaulthttpclient(); httppost httppost = new httppost(“ http://www.yoursite.com/script.p...
    编程 发布于2025-04-27

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3