我非常非常讨厌Webpack，这个东西结构复杂，概念繁多，我曾尝试学习，但官方只是教你怎么用，不解释配置底层原理，我不喜欢这种只知表面不知原理的感觉。或者设计者和众多开发者自己也不是完全清楚到底怎么解释原理吧！！！

顺晟科技：

这也不是 Vite 的问题啊，你用 Webpack 一样要处理这个问题。

所以，想搞Vue开发却必须依赖Webpack这个复杂的框架，我认为这不合理。Vue应该自成一套体系才好，因为学习都是有成本的，而且我认为Webpack的学习成本远远大于Vue！！！

统一的在线演示的项目，有cnd模式的，也有工程化开发的项目的发布版本。. Contribute to naturefwvue/nf-vue-cnd development by creating an account on GitHub.

load .vue files from your html/js. Contribute to FranckFreiburger/http-vue-loader development by creating an account on GitHub.

这个应该是容易实现的，因Vue自带编译器，Vue官方可否完善此编译器，使用其直接支持.vue文件的解释运行？

Vite工具需要解决CORS问题，并不方便。

在线演示还有点小问题，加载的路径调整有点麻烦。

以及，Webpack（包括其他同类工具）的工作原理其实并不复杂……我觉得 Webpack 官方文档 Concepts 部分已经说得很明白了。退一步讲，理解 Webpack 的工作原理并不是理解其工作机制的前提，大可不必纠结于此。

我非常喜欢FranckFreiburger的这两个项目，而且已经在实际项目中使用了，特别好用！！！一点是不方便调试。

开发时Vite是不是开启了一个服务用于解析组件？那你项目的业务里是不是也需要开启服务进行业务逻辑和数据的处理？这两个服务不是一个域吧？能没有CORS么？

你是知乎的那位吗？还是没做直接解析.vue的。而是采用了折中的方法。手动把.vue 文件拆分成 .html 文件 + .js 文件 的形式。然后用axios 加载 html文件，在用import 加载js文件，然后合并成动态组件支持的形式，最后注册组件。

Vite 跟 CORS 有什么关系？

所以，让Vue原生支持在浏览器中直接运行.vue文件，这才符合“渐进式框架”的定位！！！大家有能力把Webpack学好就用它，学不好或者不想学或者嫌麻烦，就可以用Vue自带的能力使浏览器直接运行.vue文件！！！

通过使用浏览器缓存功能或者本地存储功能将.vue文件编译后的结果保存在本地，我想运行效率也不会差吧

恐怕不行。Vue SFC 不是简单的三合一，它还支持很多扩展功能，比如方言支持、限定样式等，有些并不是那么容易或适合在浏览器上运行的。官方提供此种支持，很可能意味着 Vue SFC 规范在不同环境中的实现割裂，这不是一件好事。

Vue3 Single File Component loader. Load .vue files directly from your html/js. No node.js environment, no (webpack) build step.

退一步讲，CORS 不就是个 proxy 的事儿吗。

你想错了方向。在网络开销和浏览器性能依然是主流指标的当下，这些功能不是不能做，而是不值得。如果要说开发 API 给社区自行实现，其实现在已经有了（不然 http-vue-loader 是怎么做到的）。快速跑小项目，欢迎使用 Vite。

https://naturefwvue.github.io/nf-vue-cnd/cnd/project-template/ 又整理了一下，不知道你有没有看看。

main/cnd/project-vuex

在Vue2时代，为了能够快速开发，我使用了FranckFreiburger开发的http-vue-loader插件，它可以使用浏览器直接运行.vue文件，方便完善代码，快速开发；

以上，因为我这个是提供给 Electron 用，不需要考虑兼容性，所以代码很简单并且很多地方未完善。不过应该是你想要的思路。

vite启动的服务，支持代理访问，使用代理就不存在跨域问题了。

是的。 您是？

封装了一个函数，可以像动态路由那样使用。

在Vue3时代，FranckFreiburger又开发了vue3-sfc-loader插件，可以使浏览器直接运行Vue3的.vue文件。

vite 工具也不错。

Vite工具需要解决CORS问题，并不方便。。。。

思路：

简单来说 单文件组件 其实就是讲组件的 结构 样式 行为 用三个标签组装起来了。并且这三样可能会需要使用到预编译器。如果是不考虑到兼容性的情况下，我有一个 electron 的项目，没有使用 webpack 很捡漏不过可以给你参考下我的处理思路FETools项目地址处理文件

请大家支持这个想法！！

在线演示https://naturefwvue.github.io/nf-vue-cnd/cnd/project-vuex/

Vite工具需要解决CORS问题，并不方便。。。

你觉得 Webpack 不好用很可能是 Webpack 自己的问题。那么，试试换一个工具？Parcel、Vite 对 Vue SFC 的支持都是非常完善的。

在这些奇葩姿势里，都没有使用Webpack，没有使用Vite，就是编写完.vue格式的组件后直接交给浏览器使用，方便快捷。 首先看一下Vue官方规定的单文件组件的编写格式： {{msg}}

官方可以提供扩展。默认支持html、js、css。如果需要更的特性，如jade、ts、less等，官方可以提供api去支持。Vue直接解析运行.vue文件小项目和测试环境中非常实用。

开发时Vite是不是开启了一个服务用于解析组件？那你项目的业务里是不是也需要开启服务进行业务逻辑和数据的处理？这两个服务不是一个域吧？能没有CORS么？？？？