标签：vue 版本 App 09 loader webpack template compiler

使用vue-loader@15版本来处理.vue文件

首先要说明一点，vue-loader的不同版本在处理.vue文件的时候其配置是不同的，所以要分开来处理。
下面是使用webpack来打包一个.vue单文件组件的配置：

1. 安装vue2.+版本

npm i vue@2.6.12 -D

2. 编写一个简单的.vue单文件组件

// App.vue
<template>
	<div id="app">
		<div class="demo">
			{{message}}
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				message:"你好啊,李银河"
			}
		}
	}
</script>

<style scoped lang="less">
	.demo{
		color: pink;
		font-size: 40px;
	}
</style>

3. 在入口文件index.js中导入App.vue并进行挂载

import Vue from 'vue';
import App from './App.vue';

new Vue({
	render:h=>h(App)
}).$mount("#app")

4. 安装vue-loader15版本

npm i vue-loader@15.8.9 -D

5. 安装编译template的包vue-template-compiler，版本必须和vue版本保持一致

npm i vue-template-compiler@2.6.12 -D

6. 在webpack.config.js中配置

const {
	VueLoaderPlugin
} = require('vue-loader');

module.exports = {
	module: {
		rules: [
			// 官方文档：在 v15 中，<style lang="less"> 会完成把它当作一个真实的 *.less 文件来加载，所以需要配置less-loader来处理这种.less文件
			{
				test:/\.less$/,
				use:[
					"style-loader",
					{
						loader:"css-loader",
						options:{
							importLoaders:2
						}
					},
					"postcss-loader",
					"less-loader",
				]
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: ["babel-loader"],
			},
			{
				test: /\.vue$/,
				use: "vue-loader"  // 处理.vue文件
			}
		],
	},
	plugins:[
		new VueLoaderPlugin(), // 官方文档：Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用
	]
}

7. 执行npm run build,打包成功，说明vue-loader生效。

使用vue-loader@17版本来处理.vue文件

1. 安装vue3.0+版本

npm i vue@3.1.21 -D

2. 编写一个简单的.vue单文件组件(同上)
3. 在入口文件index.js中导入App.vue并进行挂载
   vue3.0没有全局的Vue类，而是导出了一个creatApp的方法

import {creatApp} from 'vue';
import App from './App.vue';

// Vue3.0挂载APP组件方法
createApp(App).mount('#app');

// Vue2.0挂载APP组件方法
new Vue({
	render:h=>h(App)
}).$mount("#app")

4. 安装vue-loader和vue-template-compiler
   官方文档：你应该将 vue-loader 和 vue-template-compiler 一起安装——除非你是使用自行 fork 版本的 Vue 模板编译器的高阶用户
   官方文档：每个 vue 包的新版本发布时，一个相应版本的 vue-template-compiler 也会随之发布。编译器的版本必须和基本的 vue 包保持同步，这样 vue-loader 就会生成兼容运行时的代码。这意味着你每次升级项目中的 vue 包时，也应该匹配升级 vue-template-compiler。

npm install vue-loader vue-template-compiler -D

5. 在webpack.config.js中配置(同上)

标签：vue,版本,App,09,loader,webpack,template,compiler
来源： https://www.cnblogs.com/gaokai/p/15971131.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。