Webpack在Vue CLI中的应用

webpack 作为目前最流行的项目打包工具,被广泛使用于项目的构建和开发过程中,其实说它是打包工具有点大材小用了,我个人认为它是一个集前端自动化、模块化、组件化于一体的可拓展系统,你可以根据自己的需要来进行一系列的配置和安装,最终实现你需要的功能并进行打包输出。

而在 Vue 的项目中,webpack 同样充当着举足轻重的作用,比如打包压缩、异步加载、模块化管理等等,初学者做初步了解就可以。接下来开始介绍webpack在vue项目中的配置和功能。

1. 与 vue-cli 2.x 的差异

如果你使用过 vue-cli 2.x,那么你应该了解其构建出的目录会包含相应的 webpack 配置文件,但是在 vue-cli 3.x 中你却见不到一份关于 webpack 的配置文件,难道 3.x 抛弃了 webpack?其实不然,3.x 提供了一种开箱即用的模式,即你无需配置 webpack 就可以运行项目,并且它提供了一个 vue.config.js 文件来满足开发者对其封装的 webpack 默认配置的修改

2. vue.config.js 的配置

a. baseurl

在前面的文章中,通过 vue-cli 3.x 成功构建并在浏览器中打开 http://localhost:8080/ 展示了项目首页。如果现在你想要将项目地址加一个二级目录,比如:http://localhost:8080/vue/,那么我们需要在 vue.config.js 里配置 baseurl 这一项:

// vue.config.js
module.exports = {...baseUrl: 'vue',...
}

其改变的其实是 webpack 配置文件中 output 的 publicPath 项,这时候你重启终端再次打开页面的时候我们首页的 url 就会变成带二级目录的形式。

b. outputDir

如果你想将构建好的文件打包输出到 output 文件夹下(默认是 dist 文件夹),你可以配置:

// vue.config.js
module.exports = {...outputDir: 'output',...
}

然后运行命令 yarn build 进行打包输出,你会发现项目跟目录会创建 output 文件夹, 这其实改变了 webpack 配置中 output 下的 path 项,修改了文件的输出路径。

c. productionSourceMap

该配置项用于设置是否为生产环境构建生成 source map,一般在生产环境下为了快速定位错误信息,我们都会开启 source map

// vue.config.js
module.exports = {...productionSourceMap: true,...
}

该配置会修改 webpack 中 devtool 项的值为 source-map

开启 source map 后,我们打包输出的文件中会包含 js 对应的 .map 文件,其用途可以参考:JavaScript Source Map 详解

d. chainWebpack

chainWebpack 配置项允许我们更细粒度的控制 webpack 的内部配置,其集成的是 webpack-chain 这一插件,该插件可以让我们能够使用链式操作来修改配置,比如:

// 用于做相应的合并处理
const merge = require('webpack-merge');module.exports = {...// config 参数为已经解析好的 webpack 配置chainWebpack: config => {config.module.rule('images').use('url-loader').tap(options =>merge(options, {limit: 5120,}))}...
}

以上操作我们可以成功修改 webpack module 项里配置 rules 规则为图片下的 url-loader 值,将其 limit 限制改为 5M,修改后的 webpack 配置代码如下:

{...module: {rules: [{   /* config.module.rule('images') */test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,use: [/* config.module.rule('images').use('url-loader') */{loader: 'url-loader',options: {limit: 5120,name: 'img/[name].[hash:8].[ext]'}}]}]}...
}

这里需要注意的是我们使用了 webpack-merge 这一插件,该插件用于做 webpack 配置的合并处理,这样 options 下面的其他值就不会被覆盖或改变。

e. configureWebpack

除了上述使用 chainWebpack 来改变 webpack 内部配置外,我们还可以使用 configureWebpack 来进行修改,两者的不同点在于 chainWebpack 是链式修改,而 configureWebpack 更倾向于整体替换和修改。示例代码如下:

// vue.config.js
module.exports = {...// config 参数为已经解析好的 webpack 配置configureWebpack: config => {// config.plugins = []; // 这样会直接将 plugins 置空// 使用 return 一个对象会通过 webpack-merge 进行合并,plugins 不会置空return {plugins: []}}...
}

configureWebpack 可以直接是一个对象,也可以是一个函数,如果是对象它会直接使用 webpack-merge 对其进行合并处理,如果是函数,你可以直接使用其 config 参数来修改 webpack 中的配置,或者返回一个对象来进行 merge 处理。

你可以在项目目录下运行 vue inspect 来查看你修改后的 webpack 完整配置,当然你也可以缩小审查范围,比如:

# 只查看 plugins 的内容
vue inspect plugins

f. devServer

vue.config.js 还提供了 devServer 项用于配置 webpack-dev-server 的行为,使得我们可以对本地服务器进行相应配置,我们在命令行中运行的 yarn serve 对应的命令 vue-cli-service serve 其实便是基于 webpack-dev-server 开启的一个本地服务器,其常用配置参数如下:

// vue.config.js
module.exports = {...devServer: {open: true, // 是否自动打开浏览器页面hot: true, // 启用热模块替换,在代码变更时,页面会自动更新。port: 8080, // 端口地址https: true, // 启用 HTTPShttps: false, // 使用https提供服务proxy: {//用于设置代理,以解决跨域问题。可以将请求代理到其他服务器。'/api': {target: 'http://localhost:3000', // 目标服务器changeOrigin: true, // 允许跨域pathRewrite: { '^/api': '' }, // 重写路径},},// 提供在服务器内部的其他中间件之前执行自定义中间件的能力before: (app) => {app.get('/api/custom', (req, res) => {res.json({ message: 'Custom API response' });});},...
}

以上讲解了 vue.config.js 中一些常用的配置项功能,具体的配置实现需要结合实际项目进行,完整的配置项可以查看:vue.config.js

拓展1

1.什么是webpack-merge

webpack-merge 是一个用于合并多个 Webpack 配置文件的工具。它通常用于将基本配置与特定环境(如开发、生产)或功能集(如加载器、插件等)的配置进行合并,便于在不同环境下灵活调整 Webpack 配置。

假设我们有一个基本的 Webpack 配置 webpack.base.js 和一个开发特定的配置 webpack.dev.js

1. 基础配置 (webpack.base.js)

// webpack.base.js
const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',},},],},
};

2. 开发配置 (webpack.dev.js)

// webpack.dev.js
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');module.exports = merge(baseConfig, {mode: 'development',devtool: 'source-map',devServer: {contentBase: './dist',},
});

3. 生产配置 (webpack.prod.js)

// webpack.prod.js
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');module.exports = merge(baseConfig, {mode: 'production',optimization: {minimize: true,},
});

运行构建

package.json 中配置 scripts 以运行不同的构建:

"scripts": {"build:dev": "webpack --config webpack.dev.js","build:prod": "webpack --config webpack.prod.js"
}

现在,您可以使用以下命令来构建项目:

  • 开发环境: npm run build:dev
  • 生产环境: npm run build:prod

合并细节

webpack-merge 提供了多种合并策略:

  • merge: 简单合并,后面的配置会覆盖前面的配置。
  • smartMerge: 智能合并,避免重复合并相同的内容。
  • unique: 合并数组时去重。

2.configureWebpackchainWebpack的区别

在 Vue CLI 项目中,configureWebpackchainWebpack 是用于自定义 Webpack 配置的两个不同方法。它们各自有不同的特点和适用场景。

1. configureWebpack

  • 用途: 用于直接修改 Webpack 配置对象。适用于简单的配置修改。
  • 使用方式: 你可以在 vue.config.js 文件中设置 configureWebpack 属性,可以是一个对象或一个返回配置对象的函数。

示例

// vue.config.js
const path = require('path');module.exports = {configureWebpack: {resolve: {alias: {'@': path.resolve(__dirname, 'src'),},},plugins: [// 添加自定义插件],},
};

或者使用函数:

module.exports = {configureWebpack: (config) => {// 修改配置config.devtool = 'source-map'; // 仅示例,实际可根据需要修改},
};

2. chainWebpack

  • 用途: 通过链式 API 修改 Webpack 配置,提供更多的灵活性和控制能力。适用于更复杂的配置场景,例如修改现有插件或加载器的选项。
  • 使用方式: 在 vue.config.js 中设置 chainWebpack 属性,它是一个接受 webpack-chain 实例作为参数的函数。

示例

// vue.config.js
module.exports = {chainWebpack: (config) => {// 修改现有的规则config.module.rule('vue').use('vue-loader').tap(options => {// 修改选项return {...options,loaders: {scss: 'vue-style-loader!css-loader!sass-loader',},};});// 添加新的插件config.plugin('html').tap(args => {args[0].title = 'My App';return args;});},
};

1. .config.module

  • 定义config.module 访问到 Webpack 的模块配置部分。
  • 功能: 在这里可以定义和修改模块的加载规则。

2. .rule('vue')

  • 定义rule('vue') 用于访问处理 .vue 文件的规则。Vue 文件是 Vue.js 框架的组件文件,通常包含模板、脚本和样式。
  • 功能: 这里的 vue 表示的是该规则的名称,即用于处理 Vue 单文件组件。

3. .use('vue-loader')

  • 定义use('vue-loader') 表示访问该规则中使用的 vue-loader 加载器。
  • 功能vue-loader 是一个专门用于处理 Vue 单文件组件的加载器,负责将 Vue 文件中的内容解析为可被浏览器理解的 JavaScript、HTML 和 CSS。

4. .tap(options => { ... })

  • 定义tap 是一个用于修改加载器选项的方法。
  • 功能: 通过 tap,可以获取当前 vue-loader 的配置选项,并进行修改。

5. return { ...options, loaders: { ... } }

  • 展开运算符...options 用于将现有的加载器选项展开,确保保留原有的配置。
  • 修改加载器: 在返回的对象中,添加或修改了 loaders 属性,特别是对 scss 文件的处理。这里设置了使用链式加载器:
    • vue-style-loader: 将样式注入到 DOM 中。
    • css-loader: 解析 CSS 文件。
    • sass-loader: 将 SCSS 文件转换为 CSS。

主要区别

特性configureWebpackchainWebpack
语法直接修改配置对象或返回配置对象使用链式 API 进行更细粒度的修改
使用的灵活性相对简单,适合简单的修改更灵活,适合复杂的配置和插件的修改
适用场景基本的插件添加、别名配置等复杂的加载器配置、条件添加插件等

何时使用

  • 使用 configureWebpack: 当你需要简单地添加一个插件、设置路径别名或修改一些基础配置时,可以使用 configureWebpack
  • 使用 chainWebpack: 当你需要对现有的配置进行细致的修改、删除、替换或在条件下进行配置时,选择 chainWebpack 会更合适。

3. 默认插件

通过对 vue.config.js 的了解,我们知道了 vue-cli 3.x 为我们默认封装了项目运行的常用 webpack 配置,那么它给我们提供了哪些默认插件,每一个 plugin 又有着怎样的用途呢?除了使用 vue inspect plugins 我们还可以通过运行 vue ui 进入可视化页面查看,步骤如下:

  • 打开可视化页面,点击对应项目进入管理页面(如果没有对应项目,需要导入或新建)

  • 点击侧边栏 Tasks 选项,再点击二级栏 inspect 选项

  • 点击 Run task 按钮执行审查命令

最后我们从输出的内容中找到 plugins 数组,其包含了如下插件(配置项已经省略,增加了定义插件的代码):

// vue-loader是 webpack 的加载器,允许你以单文件组件的格式编写 Vue 组件
const VueLoaderPlugin = require('vue-loader/lib/plugin');// webpack 内置插件,用于创建在编译时可以配置的全局常量
const { DefinePlugin } = require('webpack');// 用于强制所有模块的完整路径必需与磁盘上实际路径的确切大小写相匹配
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');// 识别某些类型的 webpack 错误并整理,以提供开发人员更好的体验。
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');// 将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");// 用于在 webpack 构建期间优化、最小化 CSS文件
const OptimizeCssnanoPlugin = require('optimize-css-assets-webpack-plugin');// webpack 内置插件,用于根据模块的相对路径生成 hash 作为模块 id, 一般用于生产环境
const { HashedModuleIdsPlugin } = require('webpack');// 用于根据模板或使用加载器生成 HTML 文件
const HtmlWebpackPlugin = require('html-webpack-plugin');// 用于在使用 html-webpack-plugin 生成的 html 中添加 <link rel ='preload'> 或 <link rel ='prefetch'>,有助于异步加载
const PreloadPlugin = require('preload-webpack-plugin');// 用于将单个文件或整个目录复制到构建目录
const CopyWebpackPlugin = require('copy-webpack-plugin');module.exports = {plugins: [/* config.plugin('vue-loader') */new VueLoaderPlugin(), /* config.plugin('define') */new DefinePlugin(),/* config.plugin('case-sensitive-paths') */new CaseSensitivePathsPlugin(),/* config.plugin('friendly-errors') */new FriendlyErrorsWebpackPlugin(),/* config.plugin('extract-css') */new MiniCssExtractPlugin(),/* config.plugin('optimize-css') */new OptimizeCssnanoPlugin(),/* config.plugin('hash-module-ids') */new HashedModuleIdsPlugin(),/* config.plugin('html') */new HtmlWebpackPlugin(),/* config.plugin('preload') */new PreloadPlugin(),/* config.plugin('copy') */new CopyWebpackPlugin()]
}

我们可以看到每个插件上方都添加了使用 chainWebpack 访问的方式,同时我也添加了每个插件相应的用途注释,需要注意的是要区分 webpack 内置插件和第三方插件的区别,如果是内置插件则无需安装下载,而外部插件大家可以直接访问:npm | Home 搜索对应的插件,了解其详细的 api 设置。

拓展2

1.vue.config.js 中还有哪些配置

1. publicPath

  • 作用: 指定应用的根 URL,通常用于设置基础路径。默认情况下为 '/'

  • 示例:

    module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
    };

2. outputDir

  • 作用: 指定构建输出目录,默认值为 dist

  • 示例:

    module.exports = {outputDir: 'build', // 输出到 build 目录
    };

3. assetsDir

  • 作用: 指定静态资源的目录,默认值为 ''

  • 示例:

  • module.exports = {outputDir: 'build', // 输出到 build 目录
    };

4. indexPath

  • 作用: 指定生成的 index.html 文件的输出路径,默认值为 index.html

  • 示例:

    module.exports = {indexPath: 'main.html', // 输出为 main.html
    };

5. lintOnSave

  • 作用: 在开发期间是否启用 ESLint,默认为 true

  • 示例:

    module.exports = {lintOnSave: false, // 禁用 ESLint
    };

6. configureWebpack

  • 作用: 用于直接修改 Webpack 配置。

  • 示例:

module.exports = {configureWebpack: {plugins: [// 自定义插件],},
};

7. chainWebpack

  • 作用: 使用 Webpack Chain API 进行更详细的配置。

  • 示例:

module.exports = {chainWebpack: (config) => {config.module.rule('vue').use('vue-loader').tap(options => {// 修改选项return { ...options, loaders: { scss: 'vue-style-loader!css-loader!sass-loader' } };});},
};

8. devServer

  • 作用: 用于配置开发服务器的行为。

  • 示例:

module.exports = {devServer: {port: 8080,open: true,proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,},},},
};

9. transpileDependencies

  • 作用: 指定需要转译的依赖,通常用于支持 ES6+ 的第三方库。

  • 示例:

module.exports = {transpileDependencies: ['some-library'],
};

10. productionSourceMap

  • 作用: 在生产环境是否生成 source maps,默认为 true

  • 示例:

module.exports = {productionSourceMap: false, // 禁用生产环境的 source map
};

11. css

  • 作用: 用于配置 CSS 相关的选项,如模块化、预处理器等。

  • 示例:

module.exports = {css: {modules: true, // 启用 CSS 模块sourceMap: true, // 启用 CSS source maps},
};

12. pluginOptions

  • 作用: 用于配置额外的插件选项,通常与 Vue CLI 插件一起使用。

  • 示例:

module.exports = {pluginOptions: {i18n: {locale: 'en',fallbackLocale: 'en',localeDir: 'locales',enableLegacy: false,},},
};

2.使用 chainWebpack获取到 webpack 中的某一插件后,如何修改其配置

示例:修改 HtmlWebpackPlugin 的配置

假设我们想要修改 HtmlWebpackPlugin 的配置,比如设置模板文件路径或添加一些选项。可以按照以下步骤进行:

  1. 使用 chainWebpack 方法:在 vue.config.js 中定义 chainWebpack 方法。

  2. 获取插件实例:使用 config.plugin 方法获取到指定的插件。

  3. 修改配置:通过调用 .tap() 方法来修改插件的选项。

以下是一个完整的示例:

// vue.config.js
module.exports = {chainWebpack: (config) => {// 修改 HtmlWebpackPlugin 的配置config.plugin('html').tap(args => {// args 是传递给 HtmlWebpackPlugin 的参数数组args[0].title = 'My Custom Title'; // 修改页面标题args[0].template = './public/my-template.html'; // 指定自定义模板return args; // 返回修改后的参数});},
};

要点说明

  • 获取插件:使用 config.plugin('pluginName') 获取到指定的插件实例。在此示例中,'html'HtmlWebpackPlugin 的名称,通常是根据插件在 Webpack 配置中注册的名称。

  • 使用 .tap() 方法:此方法接收一个函数,函数的参数是传给插件的原始参数数组,您可以在此数组中做出修改。

  • 返回修改后的参数:最后,需要返回修改后的参数数组,以便插件使用。

修改其他插件

类似的方法可以用于修改其他 Webpack 插件的配置。例如,若要修改 MiniCssExtractPlugin 的配置,可以使用如下方式:

config.plugin('extract-css').tap(args => {args[0].filename = 'custom.css'; // 修改输出的 CSS 文件名return args;});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/65200.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何用gpt来分析链接里面的内容(比如分析论文链接)和分析包含多个文件中的一块代码

如何用gpt来分析链接里面的内容&#xff0c;方法如下 这里使用gpt4里面有一个网路的功能 点击搜索框下面这个地球的形状即可启动搜索网页模式 然后即可提出问题在搜索框里&#xff1a;发现正确识别和分析了链接里面的内容 链接如下&#xff1a;https://arxiv.org/pdf/2009.1…

Docker Search失败,但是Pull成功的解决方法(环境:腾讯云服务器CentOS7系统安装Docker)

Docker Search失败&#xff0c;但是Pull成功的解决方法&#xff08;环境&#xff1a;腾讯云服务器CentOS7系统安装Docker&#xff09; 背景解决思路 背景 在安装完成Docker后&#xff0c;成功启动Docker(Systemctl start Docker)&#xff0c;使用搜索镜像命令&#xff08;Dock…

Obfuscator使用心得

最近在用obfuscator来混淆unity项目。但凡是涉及到反射的都不要混淆。反射需要使用到类名或者方法名&#xff0c;你混淆后&#xff0c;名字就不是原来的了。寄。还有序列化的数据也不要混淆。比如我的关卡数据序列化后保存到本地&#xff0c;在反序列化的时候找不到对应的字段名…

负载均衡式在线OJ

文章目录 项目介绍所用技术与开发环境所用技术开发环境 项目框架compiler_server模块compiler编译功能comm/util.hpp 编译时的临时文件comm/log.hpp 日志comm/util.hpp 时间戳comm/util.hpp 检查文件是否存在compile_server/compiler.hpp 编译功能总体编写 runner运行功能资源设…

云原生系列之docker的容器管理实战

前言 之前我们已经探讨过了docker的镜像,看了下时间,距离上次介绍容器的镜像已经过去两个月了, 如果你已经忘记了,可以直奔专栏:容器管理 从今天开始,我们要探讨docker 的容器了,docker的容器都是从镜像开始创建的,涉及到的操作有: 创建容器,停止容器,进入容器,删…

解决VMware的ubuntu22虚拟机没有网络

解决步骤 1.在 Windows 系统中&#xff0c;按 “WinR” 键&#xff0c;输入 “services.msc” 并回车&#xff0c;在服务列表中找到 “VMware DHCP Service” 和 “VMware NAT Service”&#xff0c;确保这两个服务已启动&#xff0c;若未启动则右键点击选择 “启动”&#xf…

NiChart 多模态神经影像(structural MRI,functional MRI,and diffusion MRI)处理和分析工具包安装

NiChart多模态神经影像部署 NiChart 本地安装Git clone 问题personal access token PAT 问题 NiChart 云端注册AWS验证问题 NiChart 是UPenn大学&#xff0c;Christos Davatzikos教授开发的一个多模态MRI影像&#xff0c;structural (sMRI), diffusion (dMRI)&#xff0c; and …

xinput1_3.dll放在哪里?当xinput1_3.dll丢失时的应对策略:详细解决方法汇总

在计算机系统的运行过程中&#xff0c;我们偶尔会遇到一些令人困扰的问题&#xff0c;其中xinput1_3.dll文件丢失就是较为常见的一种情况。这个看似不起眼的动态链接库文件&#xff0c;实则在许多软件和游戏的正常运行中发挥着至关重要的作用。一旦它丢失&#xff0c;可能会导致…

【VScode】第三方GPT编程工具-CodeMoss安装教程

一、CodeMoss是什么&#xff1f; CodeMoss是一款集编程、学习和办公于一体的高效工具。它兼容多种主流平台&#xff0c;包括VSCode、IDER、Chrome插件、Web和APP等&#xff0c;支持插件安装&#xff0c;尤其在VSCode和IDER上的表现尤为出色。无论你是编程新手还是资深开发者&a…

智慧农业物联网传感器:开启农业新时代

在当今科技飞速发展的时代&#xff0c;农业领域正经历着一场前所未有的变革&#xff0c;而智慧农业物联网传感器无疑是这场变革中的关键利器。它宛如农业的 “智慧大脑”&#xff0c;悄然渗透到农业生产的各个环节&#xff0c;为传统农业注入了全新的活力&#xff0c;让农业生产…

Pytorch | 利用AI-FGTM针对CIFAR10上的ResNet分类器进行对抗攻击

Pytorch | 利用AI-FGTM针对CIFAR10上的ResNet分类器进行对抗攻击 CIFAR数据集AI-FGTM介绍算法流程初始化迭代更新&#xff08; t 0 t 0 t0 到 T − 1 T - 1 T−1&#xff09;迭代完成 AI-FGTM代码实现AI-FGTM算法实现攻击效果 代码汇总aifgtm.pytrain.pyadvtest.py 之前已经…

benchmarksql5.0 测试工具如何在达梦上能够跑起来?

(1)添加驱动程序文件&#xff1a; lib文件夹下创建一个dm文件夹&#xff0c;并在dm文件夹下放置达梦数据库的驱动程序&#xff1a;DmJdbcDriver8.jar (2)引用驱动程序文件所在目录: 在文件benchmarksql-5.0/run/funcs.sh中的function setCP()函数中&#xff1b; 也就是在文件…

【AI系列】从零开始学习大模型GPT (1)- Build a Large Language Model (From Scratch)

Build a Large Language Model 背景文章第1章&#xff1a;理解大型语言模型什么是LLMs?什么是Transformer&#xff1f;什么是BERT和GPT?GPT的架构设计构建GPT有哪些步骤&#xff1f; 第2章&#xff1a;处理文本数据第3章&#xff1a;编码Attention机制第4章&#xff1a;从零实…

IntelliJ IDEA 中 Editor > General > Appearance 设置:编辑器的视觉外观和行为

Editor > General > Appearance 设置介绍及示例 Show line numbers 在编辑器左侧显示行号。 示例&#xff1a; 1 public class Example { 2 public static void main(String[] args) { 3 System.out.println("Hello, World!"); 4 } 5 }Sh…

Unity2021.3.16f1可以正常打开,但是Unity2017.3.0f3却常常打开闪退或者Unity2017编辑器运行起来就闪退掉

遇到问题&#xff1a; 从今年开始&#xff0c;不知道咋回事&#xff0c;电脑上的Unity2017像是变了个人似得&#xff0c;突然特别爱闪退掉&#xff0c;有时候还次次闪退&#xff0c;真是让人无语&#xff0c;一直以来我都怀疑是不是电脑上安装了什么别的软件了&#xff0c;导致…

洛谷 P3387 【模板】缩点

【题目链接】 洛谷 P3387 【模板】缩点 【题目考点】 1. 图论&#xff1a;强连通分量&#xff0c;有向图缩点 2. 图论&#xff1a;拓扑排序 有向无环图动规 【解题思路】 已知所有顶点点权是非负的&#xff0c;要想求出点权加和最大的路径。 如果该路径经过一个顶点u&…

ArkTs组件(2)

一.下拉列表组件&#xff1a;Select 1.接口 Select(options: Array<SelectOption>) 参数名类型必填说明optionsArray<SelectOption>是设置下拉选项。 SelectOption对象说明 名称类型必填说明valueResourceStr是 下拉选项内容。 iconResourceStr否 下拉选项图片…

微机接口课设——基于Proteus和8086的打地鼠设计(8255、8253、8259)Proteus中Unknown 1-byte opcode / Unknown 2-byte opcode错误

原理图设计 汇编代码 ; I/O 端口地址定义 IOY0 EQU 0600H IOY1 EQU 0640H IOY2 EQU 0680HMY8255_A EQU IOY000H*2 ; 8255 A 口端口地址 MY8255_B EQU IOY001H*2 ; 8255 B 口端口地址 MY8255_C EQU IOY002H*2 ; 8255 C 口端口地址 MY8255_MODE EQU IOY003H*2 ; …

2024年12月一区SCI-加权平均优化算法Weighted average algorithm-附Matlab免费代码

引言 本期介绍了一种基于加权平均位置概念的元启发式优化算法&#xff0c;称为加权平均优化算法Weighted average algorithm&#xff0c;WAA。该成果于2024年12月最新发表在中JCR1区、 中科院1区 SCI期刊 Knowledge-Based Systems。 在WAA算法中&#xff0c;加权平均位置代表当…

实现某海外大型车企(T)Cabin Wi-Fi 需求的概述 - 4

大家好&#xff0c;我是Q&#xff0c;邮箱&#xff1a;1042484520qq.com。 今天我们在上几讲的基础上再扩展下 Cabin Wi-Fi 的功能需求&#xff0c;讲讲如何使能 5G TCU Wi-Fi STA Bridge 模式。 参考&#xff1a; 实现某海外大型车企&#xff08;T&#xff09;Cabin Wi-Fi 需求…