简单配置vue-cli3 + 搭建的项目（webpack）

vue.config.js 的作用： 一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。也可以将配置写到 package.json 中的 vue 字段中。

• 简单的webpack配置：
  （ chainWebpack 需要根据项目具体要求配置 ）

module.exports = {
     
    publicPath: '',    // 你的项目发布的路径。Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/
    outputDir: 'dist',     // 生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)
    assetsDir: 'static',   // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    lintOnSave: false,     // 开发环境下通过 eslint-loader 在每次保存时 lint 代码
    productionSourceMap: false,         // 关闭生产环境的 source map
    devServer: {
                // 所有 webpack-dev-server 的选项都支持
        host: 'localhost', //target host
        port: 8000,        // 开发服务器端口
        open: true,        // 自动打开浏览器
        hot: true,         // 是否热更新
        overlay: {
              // 浏览器 overlay 同时显示警告和错误(弹窗报错)
            warnings: true,
            errors: true
        },
        proxy: {
                // 简单写法 proxy: 'http://localhost:4000'
            '/api': {
     
                target: 'http://www.baidu.com',
                ws: true,                  // 代理websockets
                changeOrigin: true,        // 是否跨域
                pathRewrite: {
     
                    '^/api': '/'           // '^/api' 是一个正则表达式，作用：将 /api 提换成为 /
                }
                //pathRewrite: {'^/api': '/'} 重写之后url为 http://www.baidu.com/xxxx
                //pathRewrite: {'^/api': '/api'} 重写之后url为 http://www.baidu.com/api/xxxx
            }
            // 可设置多个代理
        }
    },

    /**
     *  分别为生成环境和开发环境配置
        configureWebpack: config => {
            if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            } else {
            // 为开发环境修改配置...
            }
        }
     */
    configureWebpack: {
         // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中
        name: 'xxx项目',   // 提供应用程序的标题, 一般设置为项目名称即可
        resolve: {
     
            alias: {
            // 配置别名
                '@': resolve('src')
            }
        },
        performance: {
        // 一个资源超过多少（默认250000 (bytes)）,如何展示性能提示
            hints: "error",      // false | "error" | "warning"
            maxEntrypointSize: 400000,   // 设置入口起点的最大体积
            maxAssetSize: 300000,        // 最大单个资源体积，默认250000 (bytes)
        }
    },
    chainWebpack(config) {
       //是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
        // 修改Loader选项、添加新的Loader、替换一个规则类的Loader、修改插件
    }
}

Vue-cli 官方文档
 
 
文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！