静态资源处理
前言
最近在看[tdesign-vue](GitHub - Tencent/tdesign-vue: A Vue.js UI components lib for TDesign.)源码中发现一处看不懂的写法[出处](feat: codesanbox 引入 site-components style (#215) · Tencent/tdesign-vue@6b5a3d8 · GitHub)
import htmlContent from './index.html?raw';
import mainJsContent from './main.js?raw';
import babelContent from './.babelrc?raw';
?raw ,这是个啥?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
</body>
</html>
import htmlContent from './index.html?raw';
import mainJsContent from './main.js?raw';
import babelContent from './.babelrc?raw';
console.log(htmlContent)
为了搞清楚这个问题,直接console**.**log(htmlContent),控制台返回结果变成了字符串
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
</body>
</html>`
去掉?raw后
import htmlContent from './index.html';
import mainJsContent from './main.js?raw';
import babelContent from './.babelrc?raw';
console.log(htmlContent)
直接报错了
静态资源处理
然后在[vite官网](静态资源处理 | Vite 官方中文文档 (vitejs.dev))上找到了答案, 将资源引入为字符串.
在webpack的**[资源模块](资源模块 | webpack 中文文档 (docschina.org))**也有相关的静态资源处理说明
后记
又是涨知识的一天
