当前位置： 首页 > news >正文

webpack环境配置分类结合vue使用

news 文章来源：https://blog.csdn.net/qq_68575975/article/details/137473144 2024/10/25 12:20:57

文件目录结构

 

按照目录结构创建好文件

控制台执行: npm install

/config/webpack.common.jsconst path = require('path')
const {merge} = require('webpack-merge')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpcakPlugin = require("html-webpack-plugin")
module.exports = {entry:'./src/main.js',output:{path:path.resolve(__dirname,'../dist'),filename:'[name].bundle.js'},plugins:[new CleanWebpackPlugin(),new HtmlWebpcakPlugin({template: path.resolve(__dirname,'../src/index.html')}),new VueLoaderPlugin()],module:{rules:[{test: /\.vue$/,loader: 'vue-loader'},{test: /\.css$/,use: ['vue-style-loader', 'css-loader','style-loader']}]},resolve: {extensions: ['.js', '.vue'],alias: {'vue$': 'vue/dist/vue.esm.js'}}
}

开发环境

 ./config/webpack.dev.js
/** @description: * @param: * @return: * @Date: 2024-03-06 14:07:54*/
const path = require('path')
const {merge} = require('webpack-merge')
const common = require('./webpack.common.js')module.exports = merge(common,{mode:'development',devtool:'inline-source-map',devServer:{static:path.join(__dirname,'../dist'),host:'localhost',port:8080,open:true}
})

生产环境

./config/webpack.prod.js
/** @description: * @param: * @return: * @Date: 2024-03-06 14:08:25*/
const path = require('path')
const {merge} = require('webpack-merge')
const common = require('./webpack.common.js')
const TerserWebpackPlugin = require('terser-webpack-plugin')
module.exports = merge(common,{mode:"production",output:{filename:'[name].[hash:7].js' //例如 wang.4678946.js},optimization:{minimize:true,minimizer:[new TerserWebpackPlugin()]}
})
src/main.js/** @description: * @param: * @return: * @Date: 2024-04-07 17:50:43*/
import Vue, { h } from 'vue'
import App from './App.vue'
new Vue({render:h=>h(App)
}).$mount('#app')
src/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><script src="../dist/build.js"></script>
</body>
</html>

src/App.vue<!--* @description: * @param: * @return: * @Date: 2024-04-07 18:47:25
-->
<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message:'你打的'}}}
</script><style></style>

#package.json
{"name": "test-vue","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "webpack serve --config ./config/webpack.dev.js ","build": "webpack --config ./config/webpack.dev.js"},"keywords": [],"author": "","license": "ISC","devDependencies": {"clean-webpack-plugin": "^4.0.0","html-webpack-plugin": "^5.6.0","terser-webpack-plugin": "^5.3.10","vue": "^2.7.16","webpack": "^5.91.0","webpack-cli": "^5.1.4","webpack-dev-server": "^5.0.4","webpack-merge": "^5.10.0","css-loader": "^7.0.0","vue-loader": "^15.4.2","vue-style-loader": "^4.1.3","vue-template-compiler": "^2.7.16"},"dependencies": {}
}

相关文章：

webpack环境配置分类结合vue使用

文件目录结构 按照目录结构创建好文件 控制台执行: npm install /config/webpack.common.jsconst path require(path) const {merge} require(webpack-merge) const {CleanWebpackPlugin} require(clean-webpack-plugin) const { VueLoaderPlugin } require(vue-loader); c…...

编程日记 2024/4/8 12:45:41

【蓝桥杯嵌入式】第十三届省赛（第二场）

目录 0 前言 1 展示 1.1 源码 1.2 演示视频 1.3 题目展示 2 CubeMX配置(第十三届省赛第二场真题) 2.1 设置下载线 2.2 HSE时钟设置 2.3 时钟树配置 2.4 生成代码设置 2.5 USART1 2.5.1 基本配置 2.5.2 NVIC 2.5.3 DMA 2.6 TIM 2.6.1 TIM2 2.6.2 TIM4 2.6.3 …...

编程日记 2024/4/8 12:43:38

maya节点绕轴旋转

目录 旋转后并尝试冻结变换 绕x轴旋转90度 使用Python脚本 使用图形界面 使用MEL脚本 绕y轴旋转90度 使用Python脚本 ok 旋转后并尝试冻结变换 import maya.cmds as cmdsdef adjust_root_rotation_for_export(joint_name):# 选择根节点cmds.select(joint_name)# 应用旋…...

编程日记 2024/4/8 12:42:37

如何水出第一篇SCI：SCI发刊历程，从0到1全过程经验分享！！！

如何水出第一篇SCI&#xff1a;SCI发刊历程&#xff0c;从0到1全路程经验分享&#xff01;&#xff01;&#xff01; 详细的改进教程以及源码&#xff0c;戳这&#xff01;戳这&#xff01;&#xff01;戳这&#xff01;&#xff01;&#xff01;B站&#xff1a;Ai学术叫叫兽e…...

编程日记 2024/4/8 12:38:34

SpringBoot表单防止重复提交

哪些因素会引起重复提交&#xff1f; 开发的项目中可能会出现下面这些情况&#xff1a; 前端下单按钮重复点击导致订单创建多次 网速等原因造成页面卡顿&#xff0c;用户重复刷新提交请求 黑客或恶意用户使用postman等http工具重复恶意提交表单 重复提交会带来哪些问题&…...

编程日记 2024/4/8 12:37:33

java面向对象.day17（什么是面向对象）

先认识&#xff1a;面向过程思想&#xff0c;面向对象思想 面向过程思想&#xff08;具体&#xff09; 步骤清晰简单&#xff0c;第一步做什么&#xff0c;第二步做什么.... 面对过程适合处理一些较为简单的问题 面向对象思想&#xff08;抽象&#xff09; 物以类聚&#x…...

编程日记 2024/4/8 12:32:25

mysql处理并发简单示例

处理并发的基本思路是使用锁来控制对共享资源的访问。在MySQL中&#xff0c;可以使用事务和行级锁来处理并发。 具体处理方式如下&#xff1a; 创建一个用于存储并发任务的MySQL表&#xff0c;该表包含一个自增的ID字段和任务名称字段。设置一个最大并发数量&#xff0c;用来…...

编程日记 2024/4/8 12:31:23

顺序表——功能实现

✨✨欢迎&#x1f44d;&#x1f44d;点赞☕️☕️收藏✍✍评论 个人主页&#xff1a;秋邱博客 所属栏目&#xff1a;C语言 &#xff08;感谢您的光临&#xff0c;您的光临蓬荜生辉&#xff09; 目录 1.0 前言 2.0 线性表 2.1 顺序表 2.2 顺序表的分类 2.3 顺序表功能的实现…...

编程日记 2024/4/8 12:28:20

达梦导出工具dexp

基础环境 操作系统&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本&#xff1a;DM Database Server 64 V8 架构&#xff1a;单实例dexp 逻辑导出 dexp 工具可以对本地或者远程数据库进行数据库级、用户级、模式级和表级的逻辑备份。备份的内容非…...

编程日记 2024/4/8 12:25:16

Ubuntu 22.04安装新硬盘并启动时自动挂载

方法一 要在Ubuntu 22.04系统中安装一个新硬盘、对其进行格式化并实现启动时自动挂载&#xff0c;需要按以下步骤操作&#xff1a; 1. 安装硬盘 - 确保你的硬盘正确连接到计算机上&#xff08;涉及硬件安装&#xff09;。 2. 发现新硬盘 - 在系统启动后&#xff0c;打开终端…...

编程日记 2024/4/8 12:23:14

Mybatis中sqlSession.getMapper背后的原理

在通过MyBatis操作数据库之前我们一定先通过Session对象获取指定Mappper接口的代理对象。如下代码所示&#xff1a; public class UserMapper{Select(value"SELECT * FROM user")public List<User> findAll(); }public static void main(String [] args){Conf…...

编程日记 2024/4/8 12:21:12

[环境配置]conda 64位安装32位python

进入32模式 set CONDA_FORCE_32BIT1创建环境 conda create --name yourEnv python3.8退出32模式 set CONDA_FORCE_32BIT0ok...

编程日记 2024/4/8 12:14:05

某虚假交友APP(信息窃取)逆向分析

应用初探 在群里水群的时候 群u发了一个交友APP 于是拿来分析一下 可以看到应用打开后又一个登录的界面 需要用户输入手机号与验证码进行登录 #在线云沙箱分析 将APK放入某安信云沙箱中分析 提示应用请求了过多的敏感权限 逆向分析 直接拖入Jadx分析 好在程序没有加固 也没…...

编程日记 2024/4/8 12:13:04

基于FPGA的按键消抖

按键工作原理 当KEY1按下时&#xff0c;整条电路就会导通&#xff0c;这个时候KEY1就是低电平&#xff1b; 当KEY1松开时&#xff0c;整条电路就会断开&#xff0c;这个时候KEY1就是高定平&#xff1b; 我们可以通过判断KEY1的高低电平来判断按键是否被按下。 为什么按键消…...

编程日记 2024/4/8 12:11:02

1.网络编程-网络协议

目录 网络编程是什么 网络编程三要素 OSI七层网络模型 TCP/IP五层模型 SSL/TLS 是哪层协议 网络编程是什么 网络编程是计算机科学中的一个重要领域&#xff0c;它涉及到编写能够在网络环境中进行通信的程序。网络编程的核心目标是使不同的设备能够通过网络交换信息&#…...

编程日记 2024/4/8 12:09:01

代码+视频，手动绘制logistic回归预测模型校准曲线（Calibration curve）（2）

校准曲线图表示的是预测值和实际值的差距&#xff0c;作为预测模型的重要部分&#xff0c;目前很多函数能绘制校准曲线。 一般分为两种&#xff0c;一种是通过Hosmer-Lemeshow检验&#xff0c;把P值分为10等分&#xff0c;求出每等分的预测值和实际值的差距 另外一种是calibrat…...

编程日记 2024/4/8 12:06:58

金融数据_Scikit-Learn决策树(DecisionTreeClassifier)实例

金融数据_Scikit-Learn决策树(DecisionTreeClassifier)实例 逻辑回归: 逻辑回归常被用于二分类问题, 比如涨跌预测。你可以将涨跌标记为类别, 然后使用逻辑回归进行训练。 决策树和随机森林: 决策树和随机森林是用于分类问题的强大模型。它们能够处理非线性关系, 并且对于特征…...

编程日记 2024/4/8 12:03:55

bash的login shell与non-login shell，以及各自的初始化过程

识别login shell与non-login shell login shell 可能是以-开头的 [almalinuxVM-AlmaLinux8-tmpl-wanlinwang ~]$ echo $0 -bash # "-" is the first character. Therefore, this is a login shell.或者以--login启动的bash [almalinuxVM-AlmaLinux8-tmpl-wanlinw…...

编程日记 2024/4/8 12:00:51

为什么苹果 Mac 电脑需要使用清理软件？

尽管 Apple Mac 电脑因其卓越的性能、简洁高效的 macOS 操作系统及独特的美学设计备受全球用户青睐&#xff0c;但任何电子设备在长期使用后都难以避免面临系统资源日渐累积的问题。其中一个重要维护需求在于&#xff0c;随着使用时间的增长&#xff0c;Mac电脑可能会由于系统垃…...

编程日记 2024/4/8 11:59:50

33. UE5 RPG使用增强输入激活GameplayAbility（三）

在前面的文章&#xff0c;我们实现了使用GameplayTag和InputAction的对应绑定的数据&#xff0c;并且添加到了增强输入映射的上下文中&#xff0c;实现了通过按键打印对应的GameplayTag&#xff0c;这只是我们基础需要制作的。目的主要是为了实现在GameplayAblity上面设置对应的…...

编程日记 2024/4/8 11:58:49

speech to text 库FastASR交叉编译arm target的配置

FastASR是一个比较方便的SPEECH TO TEXT的AI库。开源。下面介绍下其在交叉编译到ARM target时候的交叉编译的cmake配置&#xff1a; cmake_minimum_required(VERSION 3.10)project(FastASR)SET(CMAKE_C_COMPILER "/home/xxx/buildroot/output/platform_name/host/bin/aar…...

编程日记 2024/4/8 11:57:48

WPS快速将插入Excle数据插入Word

前置条件&#xff1a; 一张有标题、数据的excle表格word中的表格与excle表格标题对应或包含电脑已经安装WPS软件 第一步、根据word模板设计excle模板&#xff0c;标头对应 第二步、word上面选【引用】--【邮件】&#xff0c;选打开数据源&#xff0c;找到excle文件&#xff0c;…...

编程日记 2024/4/8 11:56:46

Springboot 集成Rabbitmq之延时队列

1.首先确保已经引入了Spring AMQP和RabbitMQ的相关依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> 2. 创建一个普通队列并设置TTL&#x…...

编程日记 2024/4/8 11:53:43

【云开发笔记NO.22】运用云原生产品打造技术中台

一、云原生产品与技术中台的结合点 云原生产品以其容器化、微服务化、自动化等特性&#xff0c;为技术中台的建设提供了强大的技术支持。容器化技术使得应用可以更容易地进行部署和管理&#xff0c;提高了应用的可移植性和弹性。微服务架构则让应用更加模块化&#xff0c;便于…...

编程日记 2024/4/8 11:50:40

C++进阶(五) 哈希

1. unordered系列关联式容器 1.1 unordered_map 1.2 unordered_map的接口说明 2. 底层结构 2.1 哈希概念 2.2 哈希冲突 2.3 哈希函数 2.4 哈希冲突解决 2.4.1 闭散列 2.4.2 开散列 3. 模拟实现 3.1 unordered_set 3.2 unordered_map 4.哈希的应用 4.1 位图 4.1.…...

编程日记 2024/4/8 11:49:39

【算法基础】基于异或的排序、基于异或的经典面试题

文章目录 1. 传统交换2. 异或与异或的规律3. 基于异或的排序4. 需要注意的地方5. 经典面试题15.1 题目5.2 思路5.3 实现 6. 经典面试题26.1 题目6.2 思路6.3 实现 1. 传统交换 传统交换方法如下&#xff1a; def swap(i, j):tmp ii jj tmp通过开辟一个额外的变量空间&…...

编程日记 2024/4/8 11:47:36

HTML2:列表和表格

列表 有序列表 ordered list ol 无序列表 unordered list ul 定义列表 definition list dl 1,有序列表 每条列表前自带一个序号 2,无序列表 每条列表前自带一个小圆点 3,定义列表 注意:dl中放的不是li列表而是dt列表和dd表项 dt代表术语标题 dd代表术语内容 一个…...

编程日记 2024/4/8 11:42:31

用于无人机小型化设计的高精度温补晶振

用于无人机小型化设计的高精度温补晶振:TG2016SMN和TG2520SMN。无人机的发展可以说是非常的迅速&#xff0c;在安防&#xff0c;农业&#xff0c;交通&#xff0c;电力&#xff0c;直播等领域经常能看到无人机大显身手。无人机的应用场最是非常的广泛&#xff0c;功能更强&…...

编程日记 2024/4/8 11:41:30

轨迹规划 | 图解最优控制LQR算法(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 最优控制理论2 线性二次型问题3 LQR的价值迭代推导4 基于差速模型的LQR控制5 仿真实现5.1 ROS C实现5.2 Python实现5.3 Matlab实现 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细介绍全…...

编程日记 2024/4/8 11:38:26

工业视觉检测

目录 我对工业视觉检测的了解 一、关键组成部分 二、应用场景 三、技术挑战 我对工业视觉检测的了解 工业视觉检测是利用机器视觉技术对产品质量进行自动化检查的过程&#xff0c;它在制造业中扮演着至关重要的角色&#xff0c;用于确保产品质量、提高生产效率、减少人工成…...

编程日记 2024/4/8 11:37:25

vs做的网站案例/网站seo优化发布高质量外链

由于案例训练方法和ml-agent v0.2不同。v0.2使用Jupyter notebook运行ppo.ipynb文件。但是v0.3改为使用命令行的方法。 所以对博文《ml-agent&#xff1a;Win10下环境安装》做进一步更新&#xff0c;跳过安装&#xff08;安装过程不做修改&#xff09;&#xff0c;从第五步开始…...

编程日记 2024/10/25 9:28:18

怎么做服务器网站/上海seo推广

【编者按】&#xff1a;APP刷榜在业内已经不是什么秘密了&#xff01;为什么那么多公司和应用都热衷于刷榜&#xff1f;在业内甚至有流传“最好的渠道就是刷榜”的提法&#xff0c;这句话究竟该如何理解&#xff1f;编者任职于成都无敌勇士科技公司&#xff0c;从事海外APP推广…...

编程日记 2024/10/25 3:30:18

乌鲁木齐的网站建设/百度网页版主页

均数便是把全部的数字相加然后除以数字的个数&#xff0c;然后就能够得出平均数了&#xff0c;当然这个是最基本的算术平均。再一个便是加权平均数&#xff0c;把全部的分数乘以对应的权数然后所有加起来&#xff0c;再除以全部的权数之和就能够得出加权平均数了。考试的平均分…...

编程日记 2024/10/25 3:20:11

揭阳做网站/新闻软文发布平台

&#xff11;　引言衍射是光波的一种重要特征&#xff0c;对光波衍射现象的讨论是以惠更斯&#xff0d;　菲涅尔原理为基础的。事实证明&#xff0c;在大多数光学问题中&#xff0c;可以采用光场的标量衍射理论来描述和计算。光场的频率非常高&#xff0c;只能测量在基于&#…...

编程日记 2024/10/25 0:54:40

wordpress整站克隆/电脑学校培训

webp格式的图片非常屌&#xff0c;见文章&#xff1a;https://yq.aliyun.com/articles/63830 可是&#xff0c;它有兼容性问题&#xff0c;目前我发现只有基于webkit内核的浏览器才支持&#xff0c;如果ie内核的浏览器打开&#xff0c;根本不会显示webp格式的图片。 那么如何…...

编程日记 2024/10/24 18:51:32

做门户网站开发的技术/交换链接营销案例

有做.net的程序员和朋友曾经问过我&#xff0c;关于vs2005和vs2008、vs2008和vs2010、vs2005和vs2010项目互转的问 题&#xff0c;那么关于这个问题有两层含义&#xff1a;一种是通过高版本的编译器打开低版本的项目&#xff0c;进行升级&#xff1b;一种是通过修改Soultion文件…...

编程日记 2024/10/24 18:37:19