vite相关配置

精选原创

去年花开 2024-09-03 08:52:13 博主文章分类：vue ©著作权

文章标签 css ci json 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者去年花开的原创作品，请联系作者获取转载授权，否则将追究法律责任

1、vite开发环境和生产环境的环境变量配置

1、环境变量配置 vite本身会直接读取为什么会读取，因为含有dotenv第三方库，会直接读取 .env文件，

2、css模块化简单处理

css:{
	modules:{
		localsConvention: "camselCaseOnly" // 打包配置为驼峰命名规则。
		sopeBehaviour:"local" // 配置当前是全局 还是 局部。
		gengerateScopedName: //[name][local][hash:5] , 配置生成的css样式名称，也可以配置成函数。 一般不动
		hashPrefix:"hellow" // 配置hash生成规则 主要和 name 联用。
		globalModulePaths:[] // 配置不参与 模块化的文件路径}, //是对css模块化默认行为进行覆盖
  },
	preprocessorOptions:{
		less:{
		math:"always", // 配置lessc的编译内容，遇到乘除法自动进行
		globalVars:{ // 注入全局变量css  @mainColor就可以直接使用
   				mainColor:"red"
   			}
		},
		sass:{
		
		}
		devSourcemap:true,// 开启css索引文件，可以在报错的时候直接定位 直接定位到源代码
   }
}

1、为了防止样式被覆盖，新建的css文件可以如下，通过加上module来改变css最终生成规则，会在类名的后面生成一个has值。

a.module.css

3、postcss的理解

1、保证css在执行运行起来万无一失，，去将语法糖进行编译（嵌套语法，函数，变量）变成原生的css，在次对未来的高级语法css进行降级，前缀补全，输送到浏览器。（postcss包含了less）

npm install postcss -D

3.1、解释一下 npm install XXX 加上-s、-d、-g和什么都不加的区别。 1.npm install XXX -s

npm install XXX -s 相当于 npm install -S 相当于 npm install --save 这样安装是局部安装的，会写进package.json文件中的dependencie里。 dependencies：表示生产环境下的依赖管理；说白了你安装一个库如果是用来构建你的项目的，比如echarts、element-ui，是实际在项目中起作用，就可以使用 -s 来安装。

2.npm install XXX -d

npm install XXX -d 相当于 npm install -D 相当于 npm install --save-dev 这样安装是局部安装的，会写进package.json文件中的devDependencies 里。 devDependencies ：表示开发环境下的依赖管理；如果你安装的库是用来打包的、解析代码的，比如webpack、babel，就可以用 -d 来安装，项目上线了，这些库就没用了，不然留这些库给用户自己来打包和解析代码嘛。

3.npm install XXX -g

npm install XXX -g 表示全局安装，安装一次过后，你就可以在其他直接用啦。

4.npm install XXX

npm install XXX 什么都不加的时候 npm 5开始通过npm install 什么都不加和 npm install --save一样，都是局部安装并会把模块自动写入package.json中的dependencies里。

3.2 postcss内置属性

1、Autoprefixer浏览器补全机制，比如我们使用了box-sizing：border-box；

box-sizing:border-box;
//浏览器自动补全 自动生成以下代码
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;

2、postcss-preset-env：未来语法机制，可以书写最新浏览器语法内容。

const postcssPresetEnv = require('postcss-preset-env');

const yourConfig = {
	plugins: [
		/* other plugins */
		/* remove autoprefixer if you had it here, it's part of postcss-preset-env */
		postcssPresetEnv({
			/* pluginOptions */
			features: {
				'nesting-rules': {
					noIsPseudoSelector: false,
				},
			},
		})
	]
}
比如我们可以使用这些语法
@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:root {
  --mainColor: #12345678;
}

body {
  color: var(--mainColor);
  font-family: system-ui;
  overflow-wrap: break-word;
}

:--heading {
  background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);

  @media (--viewport-medium) {
    margin-block: 0;
  }
}

a {
  color: rgb(0 0 100% / 90%);

  &:hover {
    color: rebeccapurple;
  }
}

/* becomes */

:root {
  --mainColor: rgba(18, 52, 86, 0.47059);
}

body {
  color: rgba(18, 52, 86, 0.47059);
  color: var(--mainColor);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue;
  word-wrap: break-word;
}

3、定义css规范我们可以使用styleLint用于规范css原则，使用方法如下：以viteVue为例

安装相关依赖
npm install postcss stylelint stylelint-config-standard --save-dev
//简洁版
// 引入 postcss 相关配置
import postcss from 'postcss';
import stylelint from 'stylelint';
import stylelintPlugin from 'stylelint-webpack-plugin';
export default defineConfig({
  // 其他配置...
  css: {
    postcss: {
      plugins: [stylelintPlugin],
    },
  },
});
然后定一个 .stylelintrc.json配置文件和vite.config.json同级
// 
module.exports = {
  extends: [
    'stylelint-config-standard', // 配置stylelint拓展插件
    'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
    'stylelint-config-standard-scss', // 配置stylelint scss插件
    'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
    'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
    'stylelint-config-prettier', // 配置stylelint和prettier兼容
  ],
  overrides: [
    {
      files: ['**/*.(scss|css|vue|html)'],
      customSyntax: 'postcss-scss',
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html',
    },
  ],
  ignoreFiles: [
    '**/*.js',
    '**/*.jsx',
    '**/*.tsx',
    '**/*.ts',
    '**/*.json',
    '**/*.md',
    '**/*.yaml',
  ],
  /**
   * null  => 关闭该规则
   * always => 必须
   */
  rules: {
    'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
    'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
    'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
    'no-empty-source': null, // 关闭禁止空源码
    'selector-class-pattern': null, // 关闭强制选择器类名的格式
    'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
    'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
    'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
    'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
    'selector-pseudo-class-no-unknown': [
      // 不允许未知的选择器
      true,
      {
        ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到
      },
    ],
  },
}