vue.config.js完整配置教程

下面是“vue.config.js完整配置教程”的完整攻略。

1. 什么是vue.config.js文件

vue.config.js是一个可选的配置文件，如果项目的根目录中存在vue.config.js文件，那么它会被@vue/cli-service自动加载。你也可以通过这个文件来自定义@vue/cli-service的一些行为，或者是扩展Webpack配置。

2. 如何在项目中添加vue.config.js文件

在项目根目录下新建vue.config.js文件，并将需要自定义的配置导出即可。

示例示范：在项目根目录下的vue.config.js文件中添加对Webpack设置externals选项的配置，将vue和vue-router库设置为外部库。

module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter'
    }
  }
}

3. vue.config.js文件可配置的内容

3.1 publicPath

publicPath选项用于指定项目的公共路径，可以用于将静态资源部署到CDN服务上时使用。

示例：将publicPath指定为CDN服务地址，如下：

module.exports = {
  publicPath: 'https://cdn.example.com/'
}

3.2 outputDir

outputDir选项用于指定项目的打包输出目录，默认为dist目录。

示例：将outputDir指定为build目录，如下：

module.exports = {
  outputDir: 'build'
}

3.3 css

css选项用于配置CSS预处理器的选项。

示例：配置Sass的选项，如下：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import '@/styles/variables.scss';
        `
      }
    }
  }
}

3.4 devServer

devServer选项用于配置开发服务器的行为。

示例1：配置代理服务器，如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

示例2：配置https开发服务器，如下：

module.exports = {
  devServer: {
    https: true
  }
};

3.5 chainWebpack

chainWebpack选项用于自定义Webpack配置，允许你修改Webpack的默认配置。可以通过config.module.rule来增加、修改、删除Webpack规则。可以通过config.plugins来增加、修改、删除Webpack插件。

示例：在打包时排除掉未使用的Moment.js插件，并增加一个自定义插件MyPlugin，如下：

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
  chainWebpack: config => {
    // 移除moment所有没用的本地化内容
    config.plugin('moment-locale').use(MomentLocalesPlugin, [{
      localesToKeep: ['zh-cn']
    }]);

    //增加自定义插件
    config.plugin('my-plugin').use(MyPlugin, [{
      options: {}
    }]);
  }
}

3.6 configureWebpack

configureWebpack选项用于修改原始的Webpack配置。如果configureWebpack选项被提供，那么它将优先于其他配置文件中的配置。

示例：自定义babel-loader配置，如下：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              plugins: [
                [
                  '@babel/plugin-transform-runtime',
                  {
                    corejs: 3
                  }
                ]
              ]
            }
          }
        }
      ]
    }
  }
}

4. 总结

以上就是vue.config.js的完整配置攻略了。根据不同的需求，选取合适的选项来对自己的项目进行配置，可以帮助我们更好的完成项目的开发。