vue3常用vue.config.js配置

const webpack = require('webpack');
const path = require('path');
 
function resolve(dir) {
    return path.join(__dirname, dir);
}
 
// 加载 stylus 文件，可以是多个
function importStylus (rule) {
    rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
        patterns: [
            path.resolve(__dirname, 'src/assets/stylus/base.styl')
        ]
    })
}
 
module.exports = {     
    css: {
        extract: false
    },
    // 它支持webPack-dev-server的所有选项
    devServer: {
        host: 'localhost',// ip
        port: 8089, // 端口号
        https: false,
        open: true //配置自动启动浏览器
    },
    chainWebpack: config => {
        // 引入 stylus
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
        types.forEach(type => importStylus(config.module.rule('stylus').oneOf(type)));
        // 别名设置
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@components', resolve('src/components'))
            .set('@js', resolve('src/js'))
            .set('@images', resolve('src/assets/images'))
            .set('@svg', resolve('src/assets/images/svg'))
            .set('@stylus', resolve('src/assets/stylus'))
            .set('@libs', resolve('public/libs'))
    }   
};