vue不是脚手架搭建的如何不直接显示源码？

Question

vue不是脚手架搭建的，直接在html页面里用cdn引入，然后写的代码，部署后，如下代码是可以直接右键查看到的，如何不直接显示源码？

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

---

感谢大家的回复，另补充内容如下：
1、不考虑脚手架模式。
2、只对如下js部分不是直接源码可见，不用整个网页。

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Answer 1

代码混淆应该可以满足你的需求。混淆过的代码可读性是很差的

Answer 2

• 你是想混淆?
• 还是想把<div id="app">{{ message }}</div>这部分模板编译成js代码?

1. 想混淆,很多代码混淆的方案,随手搜索下就有
2. 想把<div id="app">{{ message }}</div>这部分模板编译成js代码的话,做不到.
   因为你是通过html页面里用cdn引入vue的形式,
   这个vue里带了动态去解析<div id="app">{{ message }}</div>这种模板的功能,
   和你使用vue-cli脚手架是两个路子,
   vue-cli脚手架是在nodejs中使用vue/compiler-sfc处理的,你现在少了这一部分

---

或者你考虑下使用渲染函数API+混淆代码来实现你期望的"不显示源码"?

区别是:

• 一个是你手动写的,
• 一个是vue-cli脚手架在nodejs中使用vue/compiler-sfc给你自动转的

---

渲染函数API: https://cn.vuejs.org/api/render-function.html#h