webpack配置详解

一、vue3.0 webpack设置别名

在vue根目录下新建一个文件，命名为vue.config.js（vue官方配置）.

首先在项目根目录下，安装path(npm install path ||   yarn add path)

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)  //__dirname为项目根目录，node的express方法中也有使用，join为javascript连接符
}
module.exports = {
    lintOnSave: true,
//配置跨域

devServer: {
    open: true,
    host: 'localhost',
    port: 3000,
    https: false,
    //以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: {//配置跨域
        '/api': {
            target: 'http://localhost:8080/chunsheng_v2/pc/',//这里后台的地址模拟的;应该填写你们真实的后台接口
            ws: true,
            changOrigin: true,//允许跨域
            pathRewrite: {
                '^/api': ''//请求的时候使用这个api就可以
            }
        }
        
    }
},

//配置别名信息
    chainWebpack: (config)=>{
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets',resolve('src/assets'))
            .set('components',resolve('src/components'))
            .set('layout',resolve('src/layout'))
            .set('base',resolve('src/base'))
            .set('static',resolve('src/static'))
    }
}