VUE 项目编译后逆向工程项目01

已于 2022-05-18 09:26:14 修改
阅读量3.7k 收藏 2
点赞数 1
分类专栏： 前端技术 Html 文章标签： vue.js sass 前端
于 2022-05-16 14:13:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiaohuyue/article/details/124798689
版权

vue 文件 被编译后对应的 css 文件 关系

1.浏览器开发者工具查看 【源代码】
项目中 src/assets文件夹里的 SASS 文件夹下的 编译后统一合并成类似 app.xxxxxxxx.css 文件
2.如果每个 VUE 文件本身使用的 <style scoped> 后，编译后会独立生成类似 chunk-xxxxxxxx.xxxxxxxx.css 文件，例如：

浏览器源文件名：chunk-f0d84694.cfad3104.css，如下图

css 文件内容，参考如下：

[data-v-0d07d11e] .p-multiselect {
    min-width: 15rem
}

[data-v-0d07d11e] .multiselect-custom-virtual-scroll .p-multiselect {
    min-width: 20rem
}

[data-v-0d07d11e] .multiselect-custom .p-multiselect-label {
    padding-top: .25rem;
    padding-bottom: .25rem
}

[data-v-0d07d11e] .multiselect-custom .country-item.country-item-value {
    padding: .25rem .5rem;
    border-radius: 3px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: .5rem;
    background-color: var(--primary-color);
    color: var(--primary-color-text)
}

[data-v-0d07d11e] .multiselect-custom .country-item.country-item-value img.flag {
    width: 17px
}

.country-item[data-v-0d07d11e] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.country-item img.flag[data-v-0d07d11e] {
    width: 18px;
    margin-right: .5rem
}

[data-v-0d07d11e] .multiselect-custom .country-placeholder {
    padding: .25rem
}

[data-v-0d07d11e] .p-chips .p-chips-token {
    background-color: var(--primary-color);
    color: var(--primary-color-text)
}

[data-v-0d07d11e] .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
    margin: .1rem .5rem .1rem 0
}

这里去除后 [data-v-0d07dlle] 后和 原始的 inputDemo.vue 文件中的内容是一样的，参考下图：

代码内容，参考如下：

<template>
	<div class="grid p-fluid">
		<div class="col-12 md:col-6">
			<div class="card">
				<h5>InputText</h5>
				<div class="grid formgrid">
					<div class="col-12 mb-2 lg:col-4 lg:col-3">
						<InputText type="text" placeholder="Default"></InputText>
					</div>
					<div class="col-12 mb-2 lg:col-4 lg:col-3">
						<InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
					</div>
					<div class="col-12 mb-2 lg:col-4 lg:col-3">
						<InputText type="text" placeholder="Invalid" class="p-invalid" />
					</div>
				</div>

				<h5>Icons</h5>
				<div class="grid formgrid">
					<div class="col-12 mb-2 lg:col-4 lg:col-3">
						<span class="p-input-icon-left">
							<i class="pi pi-user" />
							<InputText type="text" placeholder="Username" />
						</span>
					</div>
					<div class="col-12 mb-2 lg:col-4 lg:col-3">
						<span class="p-input-icon-right">
							<InputText type="text" placeholder="Search" />
							<i class="pi pi-search" />
						</span>
					</div>
					<div class="col-12 mb-2 lg:col-4 lg:col-3">
						<span class="p-input-icon-left p-input-icon-right">
							<i class="pi pi-user" />
							<InputText type="text" placeholder="Search" />
							<i class="pi pi-search" />
						</span>
					</div>
				</div>

				<h5>Float Label</h5>
				<span class="p-float-label">
					<InputText id="username" type="text" v-model="floatValue"/>
					<label for="username">Username</label>
				</span>

				<h5>Textarea</h5>
				<Textarea placeholder="Your Message" rows="5" cols="30" />

				<h5>AutoComplete</h5>
				<AutoComplete placeholder="Search" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name"/>

				<h5>Calendar</h5>
				<Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"></Calendar>

				<h5>Spinner</h5>
				<InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>

				<h5>Chips</h5>
				<Chips v-model="chipsValue"/>
			</div>

			<div class="card">
				<div class="grid">
					<div class="col-12">
						<h5>Slider</h5>
						<InputText v-model.number="sliderValue" />
						<Slider v-model="sliderValue" />
					</div>
					<div class="col-12 md:col-6">
						<h5>Rating</h5>
						<Rating v-model="ratingValue"/>
					</div>
					<div class="col-12 md:col-6">
						<h5>ColorPicker</h5>
						<ColorPicker style="width: 2rem" v-model="colorValue" />
					</div>
					<div class="col-12">
						<h5>Knob</h5>
						<Knob v-model="knobValue" :step="10" :min="-50" :max="50" valueTemplate="{value}%" />
					</div>
				</div>
			</div>
		</div>

		<div class="col-12 md:col-6">
			<div class="card">
				<h5>RadioButton</h5>
				<div class="grid">
					<div class="col-12 md:col-4">
						<div class="field-radiobutton">
							<RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" />
							<label for="option1">Chicago</label>
						</div>
					</div>
					<div class="col-12 md:col-4">
						<div class="field-radiobutton">
							<RadioButton id="option2" name="option" value="Los Angeles" v-model="radioValue" />
							<label for="option2">Los Angeles</label>
						</div>
					</div>
					<div class="col-12 md:col-4">
						<div class="field-radiobutton">
							<RadioButton id="option3" name="option" value="New York" v-model="radioValue" />
							<label for="option3">New York</label>
						</div>
					</div>
				</div>

				<h5>Checkbox</h5>
				<div class="grid">
					<div class="col-12 md:col-4">
						<div class="field-checkbox">
							<Checkbox id="checkOption1" name="option" value="New York" v-model="checkboxValue" />
							<label for="checkOption1">New York</label>
						</div>
					</div>
					<div class="col-12 md:col-4">
						<div class="field-checkbox">
							<Checkbox id="checkOption2" name="option" value="San Francisco" v-model="checkboxValue" />
							<label for="checkOption2">San Francisco</label>
						</div>
					</div>
					<div class="col-12 md:col-4">
						<div class="field-checkbox">
							<Checkbox id="checkOption3" name="option" value="Los Angeles" v-model="checkboxValue" />
							<label for="checkOption3">Los Angeles</label>
						</div>
					</div>
				</div>

				<h5>Input Switch</h5>
				<InputSwitch v-model="switchValue" />
			</div>

			<div class="card">
				<h5>Listbox</h5>
				<Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true"/>

				<h5>Dropdown</h5>
				<Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select a City" />

				<h5>MultiSelect</h5>
				<MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
					<template #value="slotProps">
						<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
							<img src="../assets/demo/flags/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
							<div>{{option.name}}</div>
						</div>
						<template v-if="!slotProps.value || slotProps.value.length === 0">
							<div class="country-placeholder">
								Select Countries
							</div>
						</template>
					</template>
					<template #option="slotProps">
						<div class="country-item">
							<img src="../assets/demo/flags/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
							<div>{{slotProps.option.name}}</div>
						</div>
					</template>
				</MultiSelect>

				<h5>TreeSelect</h5>
				<TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item"></TreeSelect>
			</div>

			<div class="card">
				<h5>ToggleButton</h5>
				<ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No" :style="{width: '10em'}"/>

				<h5>SelectButton</h5>
				<SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />

				<h5>SelectButton - Multiple</h5>
				<SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true"/>
			</div>
		</div>

		<div class="col-12">
			<div class="card">
				<h5>InputGroup</h5>
				<div class="grid p-fluid">
					<div class="col-12 md:col-6">
						<div class="p-inputgroup">
							<span class="p-inputgroup-addon">
								<i class="pi pi-user"></i>
							</span>
							<InputText placeholder="Username"/>
						</div>
					</div>

					<div class="col-12 md:col-6">
						<div class="p-inputgroup">
							<span class="p-inputgroup-addon"><i class="pi pi-shopping-cart"></i></span>
							<span class="p-inputgroup-addon"><i class="pi pi-globe"></i></span>
							<InputText placeholder="Price"/>
							<span class="p-inputgroup-addon">$</span>
							<span class="p-inputgroup-addon">.00</span>
						</div>
					</div>

					<div class="col-12 md:col-6">
						<div class="p-inputgroup">
							<Button label="Search"/>
							<InputText placeholder="Keyword"/>
						</div>
					</div>

					<div class="col-12 md:col-6">
						<div class="p-inputgroup">
							<span class="p-inputgroup-addon p-inputgroup-addon-checkbox">
								<Checkbox v-model="inputGroupValue" :binary="true"/>
							</span>
							<InputText placeholder="Confirm"/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import CountryService from '../service/CountryService';
	import NodeService from '../service/NodeService';
	export default {
		data() {
			return {
				floatValue: null,
				autoValue: null,
				selectedAutoValue: null,
				autoFilteredValue: [],
				calendarValue: null,
				inputNumberValue: null,
				chipsValue: null,
				sliderValue: 50,
				ratingValue: null,
				colorValue: '1976D2',
				radioValue: null,
				checkboxValue: [],
				switchValue: false,
				listboxValues: [
					{name: 'New York', code: 'NY'},
					{name: 'Rome', code: 'RM'},
					{name: 'London', code: 'LDN'},
					{name: 'Istanbul', code: 'IST'},
					{name: 'Paris', code: 'PRS'}
				],
				listboxValue: null,
				dropdownValues: [
					{name: 'New York', code: 'NY'},
					{name: 'Rome', code: 'RM'},
					{name: 'London', code: 'LDN'},
					{name: 'Istanbul', code: 'IST'},
					{name: 'Paris', code: 'PRS'}
				],
				dropdownValue: null,
				multiselectValue: null,
				multiselectValues: [
					{name: 'Australia', code: 'AU'},
					{name: 'Brazil', code: 'BR'},
					{name: 'China', code: 'CN'},
					{name: 'Egypt', code: 'EG'},
					{name: 'France', code: 'FR'},
					{name: 'Germany', code: 'DE'},
					{name: 'India', code: 'IN'},
					{name: 'Japan', code: 'JP'},
					{name: 'Spain', code: 'ES'},
					{name: 'United States', code: 'US'}
				],
				toggleValue: false,
				selectButtonValues1: [
					{name: 'Option 1', code: 'O1'},
					{name: 'Option 2', code: 'O2'},
					{name: 'Option 3', code: 'O3'},
				],
				selectButtonValue1: null,
				selectButtonValues2: [
					{name: 'Option 1', code: 'O1'},
					{name: 'Option 2', code: 'O2'},
					{name: 'Option 3', code: 'O3'},
				],
				selectButtonValue2: null,
				inputGroupValue: false,
				knobValue: 20,
				treeSelectNodes: null,
				selectedNode: null,
			}
		},
		countryService: null,
		nodeService: null,
		created() {
			this.countryService = new CountryService();
			this.nodeService = new NodeService();
		},
		mounted() {
			this.countryService.getCountries().then(data => this.autoValue = data);
			this.nodeService.getTreeNodes().then(data => this.treeSelectNodes = data);
		},
		methods: {
			searchCountry(event) {
				setTimeout(() => {
					if (!event.query.trim().length) {
						this.autoFilteredValue = [...this.autoValue];
					}
					else {
						this.autoFilteredValue = this.autoValue.filter((country) => {
							return country.name.toLowerCase().startsWith(event.query.toLowerCase());
						});
					}
				}, 250);
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep(.p-multiselect) {
		min-width: 15rem;
	}
	::v-deep(.multiselect-custom-virtual-scroll .p-multiselect) {
		min-width: 20rem;
	}
	::v-deep(.multiselect-custom .p-multiselect-label) {
		padding-top: .25rem;
		padding-bottom: .25rem;
	}
	::v-deep(.multiselect-custom .country-item.country-item-value) {
		padding: .25rem .5rem;
		border-radius: 3px;
		display: inline-flex;
		margin-right: .5rem;
		background-color: var(--primary-color);
		color: var(--primary-color-text);
	}
	::v-deep(.multiselect-custom .country-item.country-item-value img.flag) {
		width: 17px;
	}
	.country-item {
		display: flex;
		align-items: center;
	}
	.country-item img.flag {
		width: 18px;
		margin-right: .5rem;
	}
	::v-deep(.multiselect-custom .country-placeholder) {
		padding: 0.25rem;
	}
	::v-deep(.p-chips .p-chips-token) {
		background-color: var(--primary-color);
		color: var(--primary-color-text);
	}
	::v-deep(.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token) {
		margin: 0.1rem 0.5rem 0.1rem 0;
	}
</style>


3.主样式编译后会独立生成类似 chunk-vendors.xxxxxxxx.css 文件
4.vue 源文件可以通过 webpack:// 树结构进行查看，如下图：


5.最复杂的一步，通过分析文件的引用关系即可。

说明：a)  xxxxxxxx 代表随机的8位字符
        b) [data-v-xxxxxxxx] 代表与编译后的 HTML 中对应
          c) [data-v-xxxxxxxx] 可以直接删除，做好 VUE 文件的关联，需要与第5步进行综合评估。

XBodhi.
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
优化Vue项目编译文件大小的方法步骤
10-16
在Vue项目的开发过程中，优化编译文件大小是提升应用性能的关键环节。Vue项目通常依赖webpack进行打包，而webpack的配置调整能够显著影响最终生成的文件体积。本文将详细介绍如何通过定位问题、使用按需加载、实现...
将一个vue文件编译成js文件的工具
08-12
将一个.vue文件编译成.js文件的工具
vue打包后反编译到源代码(reverse-sourcemap)
热门推荐
u013015301的博客
03-28 2万+
1.打开cmd,使用管理员打开 2.找到需要编译的js的目录下，这里以d://dist/static/js目录为例 执行： cd d://dist/static/js 执行完成后在该目录会看到目录下存在下面的文件名：app.xxxxxx.js.map，这里以app.5ef4326406dfb69eb193.js.map为例，如下图 图1 3.执行npm，加载reverse-sourcemap资源 执行：npm install --global reverse-sourcemap 4.反
Vue2源码解析 代码生成器
LY18483的博客
08-20 856
Vue2源码解析代码生成器
vue反编译dist包到源码
最新发布
WEDGJ的博客
05-11 2194
最近由于公司老项目上的问题，由于项目很老，之前交接的源码包中缺少了很大一部分模块，但是现在线上的环境和dist包是正常运行的，领导希望能够手动将这部分补全，由于前期项目的不规范，缺少接口文档以及原型图，因此无法知道到底该如何补全，因此，我想着能不能通过dist包去反编译源码包呢，经过多方面探索发现是可行的，但是只能编译出vue文件，但是也满足基本需要了。
vue项目打包后使用reverse-sourcemap反编译到源码（详解版）
web全栈开发的博客
10-11 5027
truefalse当时：1、打包后能看到文件,;2、打包后会导致文件变大(因为多了很多map文件导致的)；当时：1、打包后无法看到文件,所以无法进行反编译;2、打包后的文件很小(因为没有map文件);，打包后文件的大小2.8M，打包后文件的大小9.6M。
网站逆向分析-vue打包后的网站数据获取
Lidppp的博客
08-16 3485
目前来说网站开发主要有三种方向 原生js或者jQuery vue，react，angular等框架 WebAssembly wasm目前除了游戏引擎打包出来之外，我还没有见到其他的应用，所以暂时不讨论。 原生js或者jQuery开发的网站 使用原生js或者jQuery开发的网站，他们的数据挂挂载方式很简单，无非就两种： window上面的全局作用域 不可在外部获取的函数作用域 因为开发方式比较原始，所以这种网站的大部分都没有进行源码压缩，源码中甚至可以看到对应的注释，所以分析网站暴露出来的源码比较方
vue的逆向传值、 同胞传值、 跨组件传值、 slot 插槽
qq_58982380的博客
05-21 1278
逆向传值–自定义事件 子组件 把数据传递到父组件之上 逆向传值 默认是不被允许的 我们需要借助一些其他知识来完成逆向传值（自定义事件辅助） 1.必须在子组件中通过事件来触发 <template> <div> zizizzizi <!-- 1.通过事件触发一个函数来完成逆向传值 --> <button v-on:click="fun()">点我进行逆向传值么么哒！！</button> </div&g
前端界面直接生成源码？用这个工具直接生成VUE代码，简单易用
apy29的博客
09-22 3544
当然我们不能指望这东西生成的代码完全符合我们的要求，这个后面肯定要改的。首先，我要向大家说明的是iVX并不是一个免费的软件，因为当你使用它的发布按钮时你会发现它是需要钱的。我个人之所以喜欢这个工具，很大原因是我是一个后台开发者，前端的东西感觉很复杂又不想碰，所以选择了iVX，如果你跟我一样的话，那么是个不错的选择。在iVX的官网上有它的详细教程，这个教程可以方便我们很快的学会它这个界面编程。前面也讲了，本身iVX是通过界面拖拽的方式来自动生成代码的，使用VB6以及C#的同学应该都知道，很方便。
关于vue页面如何反编译打包之后的.js.map 的文件
weixin_44634052的博客
11-05 2964
如何将vue的sourcemap文件反编译
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案是为了提升项目的性能和加载速度，尤其对于大型或者复杂的 Vue 应用来说，优化显得尤为重要。以下是一些关键的优化措施： 1. **不生成.map文件**： .map 文件主要用于在开发环境中进行...
详解Vue项目编译后部署在非网站根目录的解决方案
08-27
主要介绍了Vue项目编译后部署在非网站根目录的解决方案,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
反编译需要的所有工具都在这里了，解压就可以使用
07-17
反编译需要的apktools,dex2jar,jd-gui,都在这里了，需要的朋友们拿去适应吧。绝对有效。
Springboot结合Mybatis generator逆向工程，自动生成代码。
12-24
Springboot结合Mybatis generator逆向工程，自动生成代码。
Vue项目架构设计与工程化实践
02-24
一套很实用的架构设计通过cli工具生成新项目通过cli工具初始化配置文件编译源码与自动上传CDNMock数据反向检测serverapi接口是否符合预期前段时间我们导航在开发一款新的产品，名叫快言，是一个主题词社区，具体这个...
React、Vue项目build打包编译后如何再修改后台请求地址
梦想成为全栈的切图仔
10-19 3039
目打包编译 npm run build 之后成为了普通的静态网页才可上线进行部署及发布。同样这时候我们也已经将代码全部写好了。如果说要改里面的某个值或者修改请求地址我们应该怎么办呢？
如何直接运行react和Vue编译之后的文件
m0_57236802的博客
01-02 403
如果你想在生产环境中部署你的React应用，你可能需要一个更复杂的服务器配置，包括HTTPS支持、路由配置、缓存控制等。：你可以选择一个简单的HTTP服务器，如Python的http.server模块或Node.js的http-server模块。：然后，你可以在你的React应用的编译目录（通常是build目录）中启动服务器。这将在你的本地机器上启动一个HTTP服务器，你可以通过http://localhost:8080（或服务器实际的地址和端口）来访问你的应用。
vscode怎么对vue项目编译
05-25
首先需要安装Node.js和Vue CLI。然后按照以下步骤操作： 1. 打开终端，进入vue项目根目录。 2. 执行以下命令安装项目依赖： ``` npm install ``` 3. 执行以下命令启动项目： ``` npm run serve ``` 4. 打开浏览器，在地址栏输入：http://localhost:8080/，即可访问编译后的Vue项目。 如果需要将Vue项目编译成生产环境下的静态文件，可以执行以下命令： ``` npm run build ``` 执行完毕后，会在项目根目录生成一个dist文件夹，里面包含了编译后的静态文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值