Uncaught ReferenceError: Vue is not defined,webstorm打开html,vue.devtools没有启用监听不了数据

文章描述了在WebStorm中使用Vue.js开发时,Vue.tools开发者工具未启用的问题,通过检查文件路径和尝试将Vue.js放在同一目录下解决。

最近在用webstorm打开一个包含html的文件,然后用谷歌浏览器打开其中的一个html文件,发现vue.tools开发者工具没有启用,也就是vue并没有监听到数据变化,也就是说vue没有引入。

文件目录如下:vue.js在它的上级目录中。

 

html代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>aaa</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body type="javascript">
		<div id="root">
			<h2>名字:{{name}}</h2>
			<h2>学校地址:{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'小明',
				address:'北京'
			}
		})
	</script>
</html>

问题解决

网上说法:

有的说new Vue的v没有大写,有的说没有引入Vue文件,但都检查和试过了都没问题。

尝试解决:

将vue.js放入到和当前html所在的目录中,再引入。

<script type="text/javascript" src="./vue.js"></script>

结果成功了。

### 解决 'Uncaught ReferenceError: require is not defined' 错误 在Vite + Vue3项目中,出现 `Uncaught ReferenceError: require is not defined` 错误通常是因为Vite推荐使用 `import` 导入依赖,而不支持 `require` 导入。当项目中存在使用 `require` 导入其他依赖的三方依赖,且这些依赖不能或不方便更改时,就会出现该问题。另外,Vite开发模式不会编译依赖内容,所以运行时可能不会报错,但打包时就会出现问题。 解决方式如下: 1. **安装 `vite-plugin-commonjs` 插件**: - 使用npm安装: ```bash npm i vite-plugin-commonjs --save-dev ``` - 使用pnpm安装: ```bash pnpm i vite-plugin-commonjs --save-dev ``` 2. **配置 `vite.config.js`**: ```javascript import { defineConfig } from 'vite'; import commonjs from 'vite-plugin-commonjs'; const vitePlugins = [ commonjs(), // 要放在第一行,否则不生效 // 其他插件... ]; export default defineConfig({ plugins: vitePlugins, build: { commonjsOptions: { // 重点这里 transformMixedEsModules: true } } }); ``` ### 解决 'Uncaught ReferenceError: Vue is not defined' 错误 1. **确认Vue是否正确引入**: - 如果使用CDN引入Vue,确保CDN链接正确且能正常访问。例如,在HTML文件中引入Vue 3的CDN: ```html <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> ``` - 如果使用模块导入,确保在项目中正确导入Vue。在Vue 3 + Vite项目中,一般使用ES模块导入: ```javascript import { createApp } from 'vue'; ``` 2. **检查代码顺序**: 确保在使用 `Vue` 之前已经引入了Vue库。例如,在HTML文件中,`<script>` 标签的顺序应该是先引入Vue库,再使用Vue代码。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue App</title> </head> <body> <div id="app"></div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const { createApp } = Vue; const app = createApp({ data() { return { message: 'Hello, Vue!' }; } }); app.mount('#app'); </script> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值