博客


vue.config.js

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

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

// 定义拷贝文件
let copyFiles = [];
// 打包测试环境
if (NODE_ENV === 'production' && process.argv.includes('--test')) {
  copyFiles = [{
  	// 这样配置后，在打包好的文件中，一级目录下面有一个 config.js 文件
    from: './src/config/test.js',
    to: 'config.js'
  }];
}
// 打包正式环境
else if (NODE_ENV === 'production') {
  copyFiles = [{
    from: './src/config/production.js',
    to: 'config.js'
  }];
} 
// 打包开发环境
else {
  copyFiles = [{
    from: './src/config/develop.js',
    to: 'config.js'
  }];
}


/* 下面这个移动文件的配置请参考，用的不多 */
const mvdir = require('mvdir');   // 需要安装包  cnpm install mvdir --save-dev
// 这样可以写两个index.html；区别开发环境和打包环境，如需要在打包环境里配置externals的CDN 等等
// 作用：根据打包环境拷贝对应的html文件到public里面
if (NODE_ENV === 'production') {
  mvdir('index_template/index_prod.html', 'public/index.html', { copy: true });
} else {
  mvdir('index_template/index_dev.html', 'public/index.html', { copy: true });
}


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
    css: {
	    extract: true,
	    loaderOptions: {
	      // 给 sass-loader 传递选项
	      scss: {
	        // 本项目全局变量【注意：若写了样式会混入到每一个chunk】，这奖意味着每一个组件中都引入这个公用的样式文件，不必每次都在组件中去引入
	        prependData: '@import "@/assets/scss/index.scss";'
	      }
	    }
	},
	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)
        },
       	devtool = 'source-map',      /* 处理打包输出 调试模式 */
    	output.libraryExport = 'default',  /* 解决import UMD打包文件时, 组件install方法执行报错的问题！！ */	
	    if (process.env.NODE_ENV === 'production') { /* 仅生产环境使用 */
	      /* CDN打包，需要修改index.html加入CDN资源 */
	      /*
	      *	修改 index.html
	      *	<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
          *	<script src="https://cdn.staticfile.org/element-ui/2.15.7/index.min.js"></script>
	      */
	      externals = {
	        'vue': 'Vue',
	        'element-ui': 'ELEMENT',
	        //'quill': 'Quill',
	      }
	    },

		// to do list...
    },
    chainWebpack: (config) => {  //是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
        // 修改Loader选项、添加新的Loader、替换一个规则类的Loader、修改插件

		config.module
	      .rule('eslint')
	      .include.add(path.resolve(__dirname, './src')).end()
	      .exclude.add(path.resolve(__dirname, './src/assets')).end()
	      .exclude.add(path.resolve(__dirname, './dist')).end()
	      .use('eslint')
	      .loader('eslint-loader')
	      .tap(options => options);
	    
	    // 打包分析, 打包后会自动打开浏览器查看打包文件的大小
	    if (process.env.NODE_ENV === 'production') {
	      config
	        .plugin('webpack-bundle-analyzer')    // 需要安装包 webpack-bundle-analyzer
	        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
	    }
	    // 配置网页标题初始化
	    config.plugin('html').tap((args) => {
	      args[0].title = '这是一个Demo项目';
	      return args;
	    });

	    // 拷贝配置文件
	    config
	      .plugin('copy-config')
	      .use('copy-webpack-plugin', [copyFiles]);
	    
	    // to do list...
    }
}

Vue-cli 官方文档

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