webpack配置vue后，变量无法使用

最新推荐文章于 2024-11-14 09:13:22 发布

king2wang

最新推荐文章于 2024-11-14 09:13:22 发布

阅读量755

点赞数 1

分类专栏： vue webpack js 文章标签： vue js webpack

本文链接：https://blog.youkuaiyun.com/king2wang/article/details/106969029

版权

js 同时被 3 个专栏收录

18 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

webpack

1 篇文章

订阅专栏

本文详细介绍了在Webpack中正确配置Vue的步骤，解决data属性在页面上无法正常渲染的问题。通过调整js引入顺序及配置webpack.config.js，确保Vue应用能够顺利运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初识vue，难免有坑，仅此记下。

在webpack中配置vue时，发现data中的数据在页面无法正常执行，还是显示文本{{message}} 几番查找原因无果，最后发现引入的打包后js需要放在vue绑定的div之后。

以下为正确打开方式：

1.先在源码js里导入vue

import Vue from 'vue'

const app = new Vue({
	el:"#app",
	data:{
		message:'你好'
	}
});

2.然后在HTML中引入打包后的js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 习惯放在head里，这里应该是加载顺序的问题，导致message无法执行 -->
		<!-- <script src="../dist/bundle.js"></script> -->
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>
		<script src="../dist/bundle.js"></script>
	</body>
</html>

3.这是发现还不行，不用急，再配置一下webpack.config.js，通过resolve指定vue版本

（因为默认的使用vue-runtime.js，不会预编译模板）

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js',
		publicPath: '../dist/'
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.less$/,
				use: [{
					loader: "style-loader" // creates style nodes from JS strings
				}, {
					loader: "css-loader" // translates CSS into CommonJS
				}, {
					loader: "less-loader" // compiles Less to CSS
				}]
			},
			
		]
	},
	resolve: {
	        alias: {
	            'vue$': 'vue/dist/vue.esm.js'
	        }
	    }
}

大功告成！