一. 前言

学习 vite 时，找到插件 awesome-vite，顺着找，可以看到插件 vite-plugin-raw 起作用。

官方翻译该插件可将任何类型的文件转换为字符串。 

二. 使用

这里仅对 .vue 文件做转换。

使用场景，如使用 codemirror 显示源码等；

示例 index.vue 文件：

<template>
    <h1>{{info}}这是一个测试</h1>
</template>

<script>
export default {
    data() {
        return {
            info: 'Hello, '
        }
    }
}
</script>

<style>
h1 {
    color: red;
}
</style>

1. 方法一

import index from './index.vue?raw'

console.log(index)

 控制台输出

2.方法二

import(`./index.vue?raw`).then(res => {
    console.log(res.default);
});

 控制台输出 

PS：如果想使用 Webpack 方式，请参考此篇

https://blog.csdn.net/sinat_31213021/article/details/132341176