vue.config.js 是一个可选的配置文件，如果项目的(和package.json同级的)根目录中存在这个文件，那么它会被@vue/cli-service自动加载。你也可以使用 package.json中的vue字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

配置代码如下：

在vue根目录下创建vue.config.js文件

module.exports = {
    publicPath: '/',    //部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
    outputDir: 'dist',        //运行时生成的生产环境构建文件的目录(默认'dist'，构建之前会被清除)
    assetsDir: '',        //静态资源目录(js、css、img、fonts)，相对outputDir的目录(默认'')
    indexPath: 'index.html', //指定生成index.html的输出路径(相对outputDir)也可以是绝对路径
    lintOnSave: true,                //是否开启ESlint（保存时检查）
    productionSourceMap: true,    //生产环境是否生成 sourceMap 文件

    pages: {    //pages里配置的路径和文件名在你的文档目录必须存在，否则启动服务会报错
        index: {//除了 entry 之外都是可选的
            entry: 'src/index/main.js',        //page的主入口
            template: 'public/index.html',    //模板来源
            filename: 'index.html',            //在 dist/index.html 的输出
            //title在template中使用：<title><%=htmlWebpackPlugin.options.title%></title>
            title: '生成的配置信息',
            chunks: ['chunk-vendors', 'chunk-common', 'index']
            // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
        },
        subpage: 'src/subpage/main.js'
        //官方解释：当使用只有入口的字符串格式时，模板会被推导为public/subpage.html
        //若找不到就回退到public/index.html，输出文件名会被推导为subpage.html
    },
    css: {
        extract: true,        //是否使用css分离插件 ExtractTextPlugin
        sourceMap: false,    //开启 CSS source maps
        loaderOptions: {}, //css预设器配置项
        modules: false        //启用CSS modules for all css / pre-processor files.
    },
    devServer: {    //环境配置
        host: 'localhost',  //主机域名
        port: 80,   //项目端口号
        https: false,      //是否开启https
        hotOnly: false, //是否配置热更新
        open: true,      //配置自动启动浏览器
        proxy: {        //配置多个代理跨域(配置一个 proxy: 'http://localhost:4000' )
            '/api': {
                target: 'http://127.0.0.1:3000',
                ws: true,  //是否跨域
                changeOrigin: true,
                pathRewrite: {'^/api': ''}
            }
        }
    },
    pluginOptions: {// 第三方插件配置
        //...
    }
}

1.修改项目启动端口

vue-cli项目启动端口默认是8080，我们可以通过修改vue.config.js修改默认端口号。

module.exports = {
    devServer: {
        host: "localhost",
        port: 80,
        https: false,
        hotOnly: false
    },
    pluginOptions: {
        // ...
    }
};

2.设置代理和跨域请求配置

module.exports = {
    devServer: {
        host: "localhost",
        port: 80,
        https: false,
        hotOnly: false,
        proxy: {
            '/api': { //访问路径，可以自己设置，
                target: 'http://localhost:8088/springbootdemo', //代理接口，即后端运行所在的端口
                changeOrigin: true, //设置是否跨域
                ws: true,
                pathRewrite: { //访问路径重写
                    '^/api': ''
                }
            }
        }
    },
    pluginOptions: {
        // ...
    }
};