Vue脚手架中配置别名

• 设置别名后可以很便捷的访问到组件的路径

1. 调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象
2. 也可以通过链式操作

• Vue 文档连接 webpack 文档连接

let path = require('path')
function resolve(url) {
    return path.resolve(__dirname, url)
}

module.exports = {
//方法一
    configureWebpack: {
        resolve: {
            alias: {
                '_c': resolve('src/components'),
                '_p': resolve('src/page')
            }
        },
       
    },
    
    //方法二
    // chainWebpack: config => {
    //     config.resolve.alias
    //         .set('@', resolve('src'))
    //         .set('_c', resolve('src/components'))
    //         .set('_p', resolve('src/page'))
    // },

    //将不会检查错误
    // lintOnSave:false,
    devServer: {
        //换端口号
        port: 9999,
        contentBase: path.join(__dirname, 'static')
    }
}

---

补充：配置静态资源目录

• 默认情况下，将使用当前工作目录作为提供内容的目录

contentBase: path.join(__dirname, “public”)

• 注意，推荐使用绝对路径。
• 但是也可以从多个目录提供内容：

contentBase: [path.join(__dirname, “public”), path.join(__dirname, “assets”)]

• 文档连接