让Vue原生支持在浏览器中直接运行.vue组件文件

中文
, ,
#1

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

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

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

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

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

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

请大家支持这个想法！！

#2

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

#3

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

#4

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

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

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

#5

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


const myImport = (url) => {
  return new Promise((resolve, reject) => {
    const ver = window.__ver || ''
    Promise.all([
      axios.get(url + '.html' + ver),
      import(url + '.js' + ver)
    ]).then((req) => {
      resolve({
        template: req[0].data,
        props: req[1].default.props,
        setup: req[1].default.setup
      })
    })
  })
}

export default myImport

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

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

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

#7

是的。 :grinning: 您是？

#8

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

#9

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

#10

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

1 Like
#11

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

思路：

  1. 不在单文件组件里面写样式，样式通过 编辑器的插件或者 gulp 或者命令行工具来处理，并编译成css 文件
  2. 单文件组件中只写逻辑和结构，通过nodejs 监听文件变更，变更后，将template 标签里面的html代码转化成字符创， 放到 script 标签里面 的 template 代码中，并将script 里面的代码单独转化成一个 ESModule 规范的文件
  3. 入口文件通过 ESModule 的方式来加载入口的 index.js，在 index.js 中 通过 import xxx from './xxx' 来引入其他的组件或者模块

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

#12

vite 工具也不错。

#13

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

#14
#15

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

#16

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

#17

Vite 跟 CORS 有什么关系？

#18

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

#19

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

#20

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

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

#21

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