参考： https://vue-loader.vuejs.org/zh/guide/#vue-cli
打包 Vue 基本配置
复制项目，增加 App.vue，如下结构
1 安装 vue-loader 和 vue-template-compiler 依赖
npm install -D vue-loader vue-template-compiler
2 修改 webpack.config.js
//引用Node.js中的path模块，处理文件路径的小工具
const path = require("path");
//引入插件
const HtmlwebpackPlugin = require("html-webpack-plugin")
//1 加载 Vue Loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 导出一个webpack具有特殊属性配置的对象
module.exports = {
mode: "development" ,
//入口
//入口模块文件路径
entry: "./src/main.js" ,
//出口是对象
output: {
//path是一个绝对路径，__dirname 是当前js的绝对路径
path: path.join(__dirname , "./dist/"), //打包的结果文件存储目录
filename : "bundle.js" //打包的结果文件名
},module:{ //模块
rules: [ // 规则
{
test : /\.css$/ , //正则表达式，匹配 .css 文件资源
use: [
"style-loader",
"css-loader"
]
} ,
{
test : /\.(png|svg|jpg|gif)$/ , //正则表达式，匹配 .css 文件资源
use: [
"file-loader"
]
} ,
{
test:/\.?js$/,
exclude:/(node_modules|bower_components)/,//排除掉node_module目录
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env'] //转码规则
}
}
} ,
//2 配置 vue-loader
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
//配置插件
plugins: [
new HtmlwebpackPlugin({
//此插件作用是将 index.html打包到bundle.js所在目录中
//同时会在 index.html中自动的在<script>引入 bundle.js
template : "./index.html"
}),
// 3 引入Vue插件
new VueLoaderPlugin()
],
// 实时重新加载
devServer: {
contentBase: './dist'
}
}
3 安装vue模块
npm i vue
4 index.html单页面入口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
5 App.vue 根组件
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world Vue !'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
main.js 打包入口文件
import App from './App.vue'
import Vue from 'vue'
new Vue({
el: '#app' ,
template: '<App />' ,
render : h => h(App)
})
打包构建
npm run build
打包正常无错误
npm run start
查看打开的 index.html文件 ， http://localhost:8080/ ， 修改 App.vue查看效果
关于作者
王硕，网名信平，十多年软件开发经验，业余架构师，精通Java/Python/Go等，喜欢研究技术，著有《PyQt 5 快速开发与实战》《Python 3.* 全栈开发》，多个业余开源项目托管在GitHub上，欢迎微博交流。