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'))
    }
}