javascript - vue不是脚手架搭建的如何不直接显示源码？
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>共有2个答案
- 你是想混淆?
- 还是想把
<div id="app">{{ message }}</div>这部分模板编译成js代码?
- 想混淆,很多代码混淆的方案,随手搜索下就有
- 想把
<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
代码混淆应该可以满足你的需求。混淆过的代码可读性是很差的
-
本文向大家介绍从0搭建vue-cli4脚手架，包括了从0搭建vue-cli4脚手架的使用技巧和注意事项，需要的朋友参考一下 之前写了两期前后端分离的SpringBoot项目，从0搭建到整合Mybatis，但是只有后端没有前端的项目是不完整的，所以今天更新一篇从0搭建vue-cli4脚手架。 准备工作，有点类似java的jdk 安装node.js 直接去官网下载就可以https://nodejs.o
-
本文向大家介绍详解如何使用vue-cli脚手架搭建Vue.js项目，包括了详解如何使用vue-cli脚手架搭建Vue.js项目的使用技巧和注意事项，需要的朋友参考一下 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程： 后面分步说明。 2. 安装 前提条件，Node.js >=4.x版本，建议使用6.x版本。npm版本 > 3.x 全局安装vue-cli 3. 使用
-
本文向大家介绍vue-cli3.0 脚手架搭建项目的过程详解，包括了vue-cli3.0 脚手架搭建项目的过程详解的使用技巧和注意事项，需要的朋友参考一下 1.安装vue-cli 3.0 安装成功后查看版本：vue -V(大写的V) 2.命令变化 用法：create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项： -p, --
-
vue-cli脚手架不支持pnpm安装的吗？最近卸载了脚手架4.x版本，我想使用pnpm安装vue-cli发现貌似是不支持使用pnpm来安装的啊,我看官网也没用说可以支持使用pnpm来安装脚手架。是不行？
-
项目是vue的 想让在打印的时候只显示页眉不显示页脚的网址链接 css设置了@page，但是页眉和页脚都一起不见了 请问这样应该怎么去设置呢？
-
本文向大家介绍vue一cli，脚手架相关面试题，主要包含被问及vue一cli，脚手架时的应答技巧和注意事项，需要的朋友参考一下 安装：$ npm instaH 一g vue一cli 使用：$ vue init <template一name> <project一name> webpack配置详解：https://zhuanlan.zhihu.eom/p/24322005