构建项目时不会自动创建 vue.config.js 文件，需要在根目录下手动创建。插件 @vue/clli-service 会自动加载。直接拷贝如下内容即可。

该文件很丰富，有很多配置项，可自行研究(链接)。这里只列了我的项目中常用的配置。

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/global.styl')
        ]
    })
}
 
module.exports = {     
    css: {
        extract: false
    },
    // 它支持webPack-dev-server的所有选项
    devServer: {
        host: 'localhost',// ip
        port: 8086, // 端口号
        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('@images', resolve('src/assets/images'))
            .set('@stylus', resolve('src/assets/stylus'))
            .set('@libs', resolve('public/libs'))
    }   
};

接下来详细说明 vue.config.js 文件中做了哪些配置。

1、修改端口号

启动项目默认端口号是 8080。这个太常见了，很可能被占用。建议每个项目都配置唯一的端口号。例如这里将属性 module.exports.devServer.port 改为 8086。

2、设置文件别名

作用是 import 时简写 vue、js、css文件和图片的路径，因为有的文件路径特别长，不容易记。

在属性  module.exports.chainWebpack { config.resolve.alias } 中设置，调 set 方法，第一个参数是别名，第二个参数是绝对路径，从项目的根目录开始。

// <script> 标签中引入 vue 组件
import ToolBar from '@components/ToolBar.vue'
 
// <script> 标签中引入 js 文件
import epsg from '@libs/config-epsg.js'
 
// <style> 标签中引入 stylus 文件
@import '~@stylus/base.styl';
 
// <style> 标签中图片设置
background:url('~@images/login.png');

3、全局引入 stylus（可选）

这里引入了全局stylus文件，调方法 importStylus() 可看到加载了 路径 src/assets/stylus/global.styl 下的文件。

具体操作可参考：Vue 中全局引入 stylus