系统配置vue.config.js(通用)和vue3中的vite.config.js的通用配置

vue配置大全

本人实例自用,不喜勿喷

vue.config.js的配置

module.exports = {devServer: {host: '',hot: true,port: 8086,disableHostCheck: true,//新版的webpack-dev-server出于安全考虑,默认检查hostname,//如果hostname不是配置内的,将中断访问。https: false, //如果是https代理的话,这个要打开的open: true,	// 是否在开启服务器后自动打开浏览器访问该服务器proxy: {'/prod-api': {target: 'http://10.20.1.158', //要跨域的地址changeOrigin: true, //是否开启跨域},'/api': {target: 'http://192.168.2.28:8106',changeOrigin: true,// pathRewrite: {'^/get': ''} //路径重写},headers: {Referer: 'https://127.0.0.1:8443'} //使用https代理}},lintOnSave: false, // lint语法检测关闭语法检查,主要针对ESlint里面定义却没有使用出现的报错outputDir:"dist", // build打包输出目录assetsDir:"static", // 静态文件输出目录,基于distindexPath: "index.html",  // 输出html文件名productionSourceMap: false, // 取消.map文件的打包,加快打包速度publicPath:"./", //部署应用包时的基本 URL,//这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),//这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径。configureWebpack: (config) => {// process.env为环境变量,分别对应.env.development文件和.env.production文件 此处表示加快开发环境打包速度if (process.env.NODE_ENV !== 'production') return;config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;	//生产环境去掉console.logreturn {  // 此处配置webpack.config.js的相关配置plugins: [],performance: {},};},
}

vite.config.js的相关配置和注解

// vite.config.jsimport { defineConfig } from 'vite' // 帮手函数,这样不用 jsdoc 注解也可以获取类型提示
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
import { viteMockServe } from "vite-plugin-mock"const localEnabled = process.env.USE_MOCK || false;
const prodEnabled = process.env.USE_CHUNK_MOCK || false;// https://vitejs.dev/config/
export default () => defineConfig({plugins: [ //配置需要使用的插件列表vue(),viteMockServe({mockPath: "./src/server/mock",localEnabled: localEnabled, // 开发打包开关 true时打开mock  false关闭mockprodEnabled: prodEnabled,//prodEnabled, // 生产打包开关// 这样可以控制关闭mock的时候不让mock打包到最终代码内injectCode: `import { setupProdMockServer } from './mockProdServer';setupProdMockServer();`,logger: false, //是否在控制台显示请求日志supportTs:false //打开后,可以读取 ts 文件模块 打开后将无法监视 .js 文件})],// 强制预构建插件包optimizeDeps: {//检测需要预构建的依赖项entries: [],//默认情况下,不在 node_modules 中的,链接的包不会预构建include: ['axios'],exclude:['your-package-name'] //排除在优化之外},//静态资源服务的文件夹publicDir: "public",base: './',//静态资源处理assetsInclude: "",//控制台输出的级别 info 、warn、error、silentlogLevel: "info",// 设为false 可以避免 vite 清屏而错过在终端中打印某些关键信息clearScreen:true,resolve: {alias: [//配置别名{ find: '@', replacement: resolve(__dirname, 'src') }],// 情景导出 package.json 配置中的exports字段conditions: [],// 导入时想要省略的扩展名列表// 不建议使用 .vue 影响IDE和类型支持extensions:['.mjs','.js','.ts','.jsx','.tsx','.json']  },// csscss: {// 配置 css modules 的行为modules: {  },// postCss 配置postcss: {},//指定传递给 css 预处理器的选项preprocessorOptions:{scss: {additionalData:`$injectedColor:orange;`}}},json: {//是否支持从 .json 文件中进行按名导入namedExports: true,//若设置为 true 导入的json会被转为 export default JSON.parse("..") 会比转译成对象字面量性能更好stringify:false},//继承自 esbuild 转换选项,最常见的用例是自定义 JSXesbuild: {jsxFactory: "h",jsxFragment: "Fragment",jsxInject:`import Vue from 'vue'`},//本地运行配置,以及反向代理配置server: {host: "localhost",https: false,//是否启用 http 2cors: true,//为开发服务器配置 CORS , 默认启用并允许任何源open: true,//服务启动时自动在浏览器中打开应用port: "9000",strictPort: false, //设为true时端口被占用则直接退出,不会尝试下一个可用端口force: true,//是否强制依赖预构建hmr: false,//禁用或配置 HMR 连接// 传递给 chockidar 的文件系统监视器选项watch: {ignored:["!**/node_modules/your-package-name/**"]},// 反向代理配置proxy: { '/api': {target: "https://xxxx.com/",changeOrigin: true,rewrite: (path) => path.replace(/^/api/, '')}}},//打包配置build: {//浏览器兼容性  "esnext"|"modules"target: "modules",//指定输出路径outDir: "dist",//生成静态资源的存放路径assetsDir: "assets",//小于此阈值的导入或引用资源将内联为 base64 编码,以避免额外的 http 请求。设置为 0 可以完全禁用此项assetsInlineLimit: 4096,//启用/禁用 CSS 代码拆分cssCodeSplit: true,//构建后是否生成 source map 文件sourcemap: false,//自定义底层的 Rollup 打包配置rollupOptions: {},//@rollup/plugin-commonjs 插件的选项commonjsOptions: {},//构建的库lib: {},//当设置为 true,构建后将会生成 manifest.json 文件manifest: false,// 设置为 false 可以禁用最小化混淆,// 或是用来指定使用哪种混淆器// boolean | 'terser' | 'esbuild'minify: "terser", //terser 构建后文件体积更小//传递给 Terser 的更多 minify 选项。terserOptions: {},//设置为 false 来禁用将构建后的文件写入磁盘write: true,//默认情况下,若 outDir 在 root 目录下,则 Vite 会在构建时清空该目录。emptyOutDir: true,//启用/禁用 brotli 压缩大小报告brotliSize: true,//chunk 大小警告的限制chunkSizeWarningLimit: 500},ssr: {// 列出的是要为 SSR 强制外部化的依赖external: [],//列出的是防止被 SSR 外部化依赖项noExternal: []}
})


---------------------
作者:luofei_create
来源:CSDN
原文:https://blog.csdn.net/luofei_create/article/details/124985893
版权声明:本文为作者原创文章,转载请附上博文链接!
内容解析By:CSDN,CNBLOG博客文章一键转载插件

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

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

相关文章

.NET 6应用程序适配国产银河麒麟V10系统随记

最近想在麒麟系统上运行.NET 6程序,经过一番折腾最终完成了,简单记录一下。目标系统:CPU: aarch64架构(ARM64)操作系统:银河麒麟V10高级服务器系统银河麒麟V10系统(以下简称麒麟)使用的是redhat类似的dnf包…

SQL优化大法

一、查询SQL尽量不要使用select *,而是具体字段 1、反例 SELECT * FROM user2、正例 SELECT id,username,tel FROM user3、理由 节省资源、减少网络开销。 可能用到覆盖索引,减少回表,提高查询效率。 注意:为节省时间&#x…

spring boot 整合mybatis

1、添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>com.oracle</groupId><artifactId>ojdbc6</art…

Mac系统之----教你怎么显示隐藏文件,或者关闭显示隐藏文件

显示&#xff1a;defaults write com.apple.finder AppleShowAllFiles -bool true隐藏&#xff1a;defaults write com.apple.finder AppleShowAllFiles -bool false转载于:https://www.cnblogs.com/akiha/p/6936332.html

k8s 读书笔记 - CRI(容器运行时接口)详解

k8s Node 节点&#xff08;kubelet&#xff09;的主要功能就是启动和停止容器的组件&#xff0c;这组件我们称之为 容器运行时&#xff08;Container Runtime&#xff09;&#xff0c;这其中最知名的就是 Docker 了。为了更具扩展性&#xff0c;k8s 从 v1.5 版本开始就加入了容…

HTML5_02之视频、音频、Canvas

1、HTML5新特性之视频播放——video&#xff1a; ①例&#xff1a;<video src""></video> ②video标签默认为300*150的inline-block&#xff1b; ③成员属性&#xff1a; autoplay&#xff1a;是否自动播放&#xff1b; controls&#xff1a;是否显示播…

Win11的这个功能,厉害了!

上周微软正式发布了Windows11的22H2版本&#xff0c;虽说是一周年更新版&#xff0c;但仍然有不少的问题。微软给Win10换了一套皮肤&#xff0c;并做了一些优化升级&#xff0c;摇身一变成了Win11&#xff0c;但是外观方面却做的并不是很协调&#xff0c;有一些界面仍然保留着以…

platform_set_drvdata和platform_get_drvdata用法【转】

本文转载自&#xff1a;http://www.cnblogs.com/wangxianzhen/archive/2013/04/09/3009530.html 在用到Linux设备驱动的platform框架时&#xff0c;常常会遇到两个函数platform_get_drvdata和 platform_set_drvdata。通常&#xff0c;会在驱动的probe函数中获取device的相关信息…

MAUI + Masa Blazor 开发带自动更新功能的安卓App

自动更新主要下面4个步骤获取最新版本号提示用户发现更新&#xff0c;等待用户确认更新下载最新的apk包安装apk包下面从创建MAUI项目开始1、创建Maui Blazor Server应用2、安装Masa.Blazor&#xff0c;并添加引用dotnet add package Masa.Blazor在 wwwroot/index.html 中引入资…

WebApi 将 DataRow、DataTable转换成JObject返回

/// <summary> /// 扩展&#xff1a;将object强制转化为int /// </summary> /// <param name"o">要强制转换的object</param> /// <param name"defaultValue">o为null或者转换失败的默认值</param> /// <returns&g…

空间矢量数据(.shp文件)之JAVA操作

Shape文件由ESRI开发。一个ESRI&#xff08;Environmental Systems Research Institute&#xff09;的shape文件包含一个主文件&#xff0c;一个索引文件&#xff0c;和一个dBASE表。当中主文件的后缀就是.shp。 Shape文件已经是一种开源的文件格式。官方早在2006年就出版了对应…

[deviceone开发]-一个很炫的手势动画示例

2019独角兽企业重金招聘Python工程师标准>>> 一、简介 这是iOS下的效果&#xff0c;android下完全一致。通过do_GestureView组件和do_Animation组件&#xff0c;deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合…

POJ-3067 Japan---树状数组逆序对变形

题目链接&#xff1a; https://vjudge.net/problem/POJ-3067 题目大意&#xff1a; 日本岛东海岸与西海岸分别有N和M个城市&#xff0c;现在修高速公路连接东西海岸的城市&#xff0c;求交点个数。 解题思路&#xff1a; 记每条告诉公路为(x,y), 即东岸的第x个城市与西岸的第y个…

C# 笔迹擦除8边形

本文经原作者授权以原创方式二次分享&#xff0c;欢迎转载、分享。原文作者&#xff1a;唐宋元明清原文地址&#xff1a; https://www.cnblogs.com/kybs0/p/16593146.htmlC# 笔迹擦除8边形擦除区域与橡皮大小不一致测试反馈&#xff0c;擦除区域与真实的橡皮大小不一致&#…

资深私域运营必知的100个专业名词!

来源 | 晏涛三寿 &#xff08;ID&#xff1a;yantao-219&#xff09; 作者 | 晏涛 如今私域相关人才进入了供不应求的状态&#xff0c;不少企业开始设置专门的岗位&#xff0c;私域运营也成为了招聘市场中的“香饽饽”。 但是想要成为一名优秀的私域运营并不容易&#xff0c;…

【错误解决】[Maven] cannot be opened because it does not exist错误[文件无法编译到target目录下的解决方法]...

转载请注明出处&#xff1a;http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 使用IDEA搭建的Maven项目&#xff0c;在写SpringEL和资源调用时出现了如下错误: 相信我&#xff0c;代码没问题的、 Caused by: java.io.FileNotFoundException: class path res…

JQ插件 jquery mobiscroll

参数&#xff1a; theme是指主题 display&#xff1a;bottom 是指弹出框的位置&#xff0c;分别可以使用top,bottom,inline来定义&#xff0c;这里解释一下inline的用法:inline的话就可以实现页面一加载就能看到这个弹出框&#xff0c;如果使用top和bottom,则必须使得输入框获得…

commons-lang3:DateUtils

2019独角兽企业重金招聘Python工程师标准>>> /** * 以秒为标准时间的毫秒数 */ public static final long MILLIS_PER_SECOND 1000 /** *以分钟为标准时间的毫秒数 */ public static final long MILLIS_PER_MINUTE 60 * MILLIS_PER_S…

SVN配置提交代码自动部署

最近新开了web端项目&#xff0c;前端开发完成后&#xff0c;需要将打包文件再替换到web目录&#xff0c;感觉有点麻烦&#xff0c;于是想找找一劳永逸的方法&#xff0c;恰好配置svn的 post-commit可以实现此功能&#xff0c;在此记录下来。 hooks SVN安装路径下有个hooks文件…

Blazor University (46)依赖注入 —— Transient 依赖

原文链接&#xff1a;https://blazor-university.com/dependency-injection/dependency-lifetimes-and-scopes/transient-dependencies/Transient 依赖Transient 依赖是最容易理解的。在构建注册为 Transient 的可注入依赖项时&#xff0c;依赖项容器只是充当工厂。一旦实例被创…