一、安装vite reacte(省略)
vite官网
二、安装sass
npm install --save-dev sass
任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。
Vite 对 .scss, .sass, .less, .styl 和 .stylus 文件的提供了内置支持。没有必要为它们安装特定的 Vite 插件,但必须安装相应的预处理器依赖。详情
引入scss文件
三、gzip压缩
3.1 安装@originjs/vite-plugin-commonjs为了不让compression-webpack-plugin报错
npm install @originjs/vite-plugin-commonjs compression-webpack-plugin @gfx/zopfli --save-dev
optimizeDeps: {
esbuildOptions: {
plugins: [
esbuildCommonjs([
new CompressionPlugin({
filename: "[path][base].gz",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
new CompressionPlugin({
filename: "[path][base].br",
algorithm: "brotliCompress",
test: /\.(js|css|html|svg)$/,
compressionOptions: {
params: {
[zlib.constants.BROTLI_PARAM_QUALITY]: 11,
},
},
threshold: 10240,
minRatio: 0.8,
}),
])
]
}
},
四、配置 路径
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
五‘配置移动端自适应(pc也可以使用)
安装
npm i postcss-px-to-viewport
注意:scss less css不能有注释,否则报错
css: {
postcss: {
plugins: [
postcssPxTtoViewport({
unitToConvert: 'px',
viewportWidth: 750,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [],
landscape: false,
})
]
},
}
六、本地代理
server: {
port: 8080,
proxy: {
'/api: {
target: 'http://****',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/is/, '')
}
}
},
完整vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';
import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs'
import CompressionPlugin from 'compression-webpack-plugin'
import zlib from 'zlib'
import postcssPxTtoViewport from "postcss-px-to-viewport"
export default defineConfig({
optimizeDeps: {
esbuildOptions: {
plugins: [
esbuildCommonjs([
new CompressionPlugin({
filename: "[path][base].gz",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
new CompressionPlugin({
filename: "[path][base].br",
algorithm: "brotliCompress",
test: /\.(js|css|html|svg)$/,
compressionOptions: {
params: {
[zlib.constants.BROTLI_PARAM_QUALITY]: 11,
},
},
threshold: 10240,
minRatio: 0.8,
}),
])
]
}
},
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
css: {
postcss: {
plugins: [
postcssPxTtoViewport({
unitToConvert: 'px',
viewportWidth: 750,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [],
landscape: false,
})
]
},
},
publicPath: "./",
// 如果你不需要使用eslint,把lintOnSave设为false即可
lintOnSave: false,
// 打包时不生成.map文件
productionSourceMap: false,
//本地代理
server: {
proxy: {
'/api': {
target: 'http://xxx:8080/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})