mk-vue

vite

提示

更多关于vite配置请看官网open in new window，这里只是简单介绍本模板的配置信息。

常量

点击查看详情
// 需要px转rem
export const PX2REM = false

// 是否打开浏览器
export const OPEN = false

// 服务端口
export const PORT = 3000

// baseURL
export const BASE_URL = './'

// 包依赖分析
export const ANALYSIS = true

// 输出文件
export const OUT_DIR = 'dist'

// 静态打包文件夹
export const ASSETS_DIR = 'assets'

// 打包chunk大小警告值
export const CHUNKS_SIZE = 12 * 1000

基础配置

base

base配置读取的常量BASE_URL默认值为./，你可以根据自己项目修改常量。

server

  1. open与port

请看常量配置，默认不打开浏览器，默认端口3000。

  1. proxy

代理，读取环境变量VITE_APP_PROXY是否开启，ON开启，默认只有.env.dev开发模式开启。

配置proxy详情
export default {
    '/api': {
        target: 'http://www.mkimq.com',
        changeOrigin: true,
        rewrite: (path: string) => path.replace(/^\/api/, '')
    },
    '/soket.io': {
        target: 'ws://www.mkimq.cn'
    }
}

resolve

模板配置alias，@ => src，你可以更具实际情况添加更多，或者选择删除。你可能注意到，下方代码12行标记，解决 使用 vue-i18n 入口文件配置 控制台报警问题。

点击查看详情
import path from 'path'

const paths = [
    {
        name: '@',
        path: 'src'
    }
]

const alias: any = {
    // ! 解决 使用 vue-i18n 入口文件配置 控制台报警问题
    'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
}

paths.forEach(item => {
    alias[item.name] = getPath(item.path)
})

export default {
    alias
}

function getPath(p: string) {
    return path.resolve(process.cwd(), p)
}











 













css

模板默认把@/style/themes.scss和@/style/mixins.scss注入到每个模块，这样你就可以直接使用，不需要手动引入了，例子：.color: { color: $color;}；你可以开启px2rem，默认没开启，如果你项目需要移动端适配，你可以在常量里开启，你也可以删除项目代码不使用px2rem。

查看css.ts配置
import { CSSOptions } from 'vite'
import postCssPxToRem from 'postcss-pxtorem'
import config from './px2rem'
import { PX2REM } from '../constant'

const css: CSSOptions = {
    preprocessorOptions: {
        scss: {
            javascriptEnabled: true,
            additionalData: `
                    @import "@/style/themes.scss";
                    @import "@/style/mixins.scss";
                `
        }
    }
}

if (PX2REM) css.postcss = {
    plugins: [
        postCssPxToRem(config)
    ]
}









 
 





 






查看px2rem.ts配置
export default {
    rootValue: 37.5, // 1rem的大小
    propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
    selectorBlackList: ['.px']
}

小技巧

注意

当运行pnpm lint:prettier命令时，会自动把PX单位转为px，你可以在.prettierignore添加*.scss *.css *.less

如果你开启了px2rem，但是有的不需要转换，你可以在写px单位时大写，如：PX这时就不会转换成rem，你也可以在上面代码px2rem.ts配置里selectorBlackList里添加选择器，默认配置不转换的选择器为.px。

build

打包相关基础配置，静态变量可以设置输出的文件夹，静态文件打包出来文件夹，chunks超过发出警告，具体配置信息你可以查看上面的静态变量，更多配置你可以查询vite官网open in new window。

插件

提示

模板具体相关配置，你可以查看build/vite/plugins下文件，更多配置可以查看相关文档。你可以更具自己实际情况增减插件