提示：webpack构建Vue项目
文章目录
前言
提示：上一篇写的是webpack构建Vue的脚手脚：
不知道各位道友有没有出错的，但是我在结合使用elementUI的时候是出错的，所以又整了这么一篇，有大神的话希望能够指点一下我还有什么缺少的配置。
一、先看项目结构
dist： 使用webpack打包后的文件
// 这里面的文件会在打包的时候进行清空和加载，不需要去管
node_modules： 下载的依赖所在的包
router： Vue 路由的配置文件
// 配置项目路由的一个index.js 文件
views： Vue 的其他视图
index.html ： 页面模板，Vue是单页面组件开发
// 只有一个div, id 为 app
main.js： js 文件的入口文件
// 配置挂载， router, 以及其他资源
package.json： 大版本的依赖信息
package-lock.json： 下载的依赖信息
webpack.config.js： webpack 打包的配置文件
二、使用步骤
上面的结构是我测试成功的一个项目结构，下面就从头开始一步一步来构建，因为我这里是直接构建，就不解释其他的用法了。
1、创建项目
先说运行的方式，因为JavaWeb项目使用到Tomcat 服务器，而JavaWeb项目我使用Maven的骨架创建。
安装插件： Maven Helper
pom.xml 添加依赖
// tomcat 依赖
<build>
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
</plugin>
</plugins>
</build>
运行方式：
二、初始化项目
1. npm inti -y 初始化管理项目
提示: 要到webapp 之下运行命令
会生成 package.json 文件，顺便把一些基本的目录构建了
在这里直接将我的 package.json 的依赖复制到你的 package.json 里面。再运行命令
2. npm i ( 下载 package.json 的依赖到项目里)
package.json 代码如下（示例）：
// 主需要将 "scripts":、 "dependencies":、 "devDependencies": 内容复制即可，其他是自己的，不需要更改
{
"name": "webapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack --mode=development --watch",
"build": "webpack --mode=production"
},
"dependencies": {
"axios": "^0.22.0",
"default-passive-events": "^2.0.0",
"element-ui": "^2.15.6",
"vue": "^2.6.14",
"vue-router": "^3.5.2"
},
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@vue/cli-plugin-babel": "^5.0.8",
"babel-loader": "^8.2.2",
"babel-plugin-component": "^1.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-runtime": "^6.26.0",
"css-loader": "^6.3.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"less-loader": "^11.0.0",
"sass": "^1.42.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.3.0",
"stylus-loader": "^7.0.0",
"url-loader": "^4.1.1",
"vue-hot-reload-api": "^2.3.4",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.9.8",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.56.0",
"webpack-cli": "^4.8.0"
},
"keywords": [],
"author": "",
"license": "ISC"
}
3. index.jsp 文件删掉，编写index.html文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-dome</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
三、配置文件
1、根目录下创建webpack.config.js
提示： index.jsp我这里忘记删掉了，运行成功才后知后觉删的，不影响。
webpack.config.js 内容
// 将一下内容直接复制到创建的webpack.config.js 文件里（照着我的步骤走的话）
// 如果不是，就只需要注意路径的配置即可
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 设置入口和出口
module.exports = {
entry: './main.js', // 入口文件
output: { // 出口文件
path: path.resolve(__dirname, 'dist'), // 打包的文件路径
filename: 'bundle.js', // 打包的文件名
clean: true, // 自动将上次打包目录资源清空
},
// 文件转换，模块的打包规则
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader'},
{ test: /\.s[ac]ss$/, use: [ 'style-loader, css-loader, sass-loader' ] },
{
test: /\.m?js$/,
use: {
loader: 'babel-loader', // 这个插件会将js 的新语法转换成老语法，进行json转换
options: {
presets: [ '@babel/preset-env' ],
},
},
},
// 处理图片的配置， 老语法
// { test: /\.(png|jpe?g|gif|svg|webp)$/, use: { loader: 'file-loader', options: { esModule: false } } },
// 新语法
//{ test: /\.(png|jpe?g|gif|svg|webp)$/, type: 'asset/resource'},
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
}
},
{
test: /\.css$/,
use: [
'style-loader',
'vue-style-loader',
'css-loader'
],
},
// less
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
// stylus
{
test: /\.styl$/,
use: ["style-loader", "css-loader", "stylus-loader"],
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
],
},
// 插件的位置, plugins是一个数组， 配置插件
plugins: [
// new 一个插件实例
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "./index.html"),
}),
],
// 热加载
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
}
2、配置main.js 文件
main.js 文件内容
import Vue from "vue";
import App from './App.vue'; // 导入根目录下的App.vue ,注意点就是要把后缀名.vue补齐，其他文件也是
import router from "./router"; // 导入的router 是 router包下index.js 导出的router 对象，下面再写上
// elementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// Added non-passive event listener to a scroll-blocking 'mousewheel' event 错误引入
import 'default-passive-events'
Vue.use(ElementUI) // 注册ElementUI
Vue.config.productionTip = false
new Vue({
el: "#app", // 挂载的是 index.html的 div id app
router, // 挂载路由
render: h => h(App), // 将内容渲染到App.vue上
})
3. router包下创建index.js 配置路由
index.js 内容
import Vue from "vue"; // 先导入 Vue
import VueRouter from "vue-router"; // 再导入 VueRouter
import Aside from '../views/Aside.vue' // 组件 Aside , 是在views包下创建的Aside.vue 文件， 不是elementUI的组件
import Header from '../views/Header.vue' // Header 组件， 同样引入需要补齐后缀名 .vue
// 注册路由
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', component: Aside }, // 配置路由对象
{ path: '/Header', component: Header },
]
})
export default router; // 导出路由对象
4. views 包下创建视图
Aside.vue
<template>
<div>
<h1>Aside组件</h1>
<el-button type="success" @click="$router.push('/Header')">去Header组件</el-button>
</div>
</template>
<script>
export default {
name: "Aside",
}
</script>
<style scoped>
</style>
Header.vue , 去elementUI 官网把这个整个复制粘贴到Header.vue 上
5. 根目录下创建App.vue
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App.vue"
}
</script>
<style scoped>
</style>
6. 控制台输入命令 npm run serve
到这一步就已经差不多大功告成了.
控制台这样的样式说明成功的，webpack 运行没有错误
7. 运行整个 JavaWeb项目（项目名： webpack_vue_dome）
使用Maven 依赖的tomcat 启动
8. 效果
总结
至此结束，剩下的就开始肝代码了。
3865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
