vue-cli3中vue.config.js配置教程详解

下面就是对“vue-cli3中vue.config.js配置教程详解”的完整攻略。

使用vue-cli3创建Vue项目

首先，我们需要安装Vue的脚手架工具——vue-cli3，使用以下命令进行安装：

npm install -g @vue/cli

安装完成后，我们可以使用以下命令来创建一个新的Vue项目：

vue create my-project

vue.config.js文件的作用和位置

在Vue项目中，可以在项目根目录中找到vue.config.js文件，该文件的作用是配置Vue项目的一些全局配置项，如开发服务器的端口、构建输出文件的路径、Webpack的配置等。

vue.config.js的基本配置

在vue.config.js中，可以导出一个JavaScript对象，该对象中包含了各种配置项，例如：

module.exports = {
  // 配置开发服务器的端口号为8080
  devServer: {
    port: 8080
  },
  // 配置构建输出路径，将构建输出文件放到dist目录下
  outputDir: 'dist'
}

vue.config.js中其它常用配置项

除了上述的基本配置项外，vue.config.js中还有一些常用的配置项，下面我们来逐一介绍。

publicPath

publicPath配置项用于指定构建后应用程序的根路径，可以通过设置不同的publicPath来修改静态资源的路径，例如：

module.exports = {
  // 将publicPath设置为'/'，将静态资源的路径设置为根路径
  publicPath: '/'
}

configureWebpack

configureWebpack配置项用于修改或扩展Webpack的配置，例如：

module.exports = {
  // 修改Webpack的配置，添加一些自定义loader或plugin
  configureWebpack: {
    module: {
      rules: [
        // 自定义loader
        { test: /\.coffee$/, use: ['coffee-loader'] }
      ]
    }
  }
}

chainWebpack

chainWebpack配置项用于chainWebpack规则，可以通过chainWebpack修改/扩展webpack配置，在内部可以通过webpack-chain文档中的API进行操作。示例如下：

module.exports = {
  // 修改Webpack的配置，添加一些自定义loader或plugin
  chainWebpack: config => {
    // 添加自定义loader
    config.module
      .rule('coffee')
      .test(/\.coffee$/)
      .use('coffee-loader')
      .loader('coffee-loader')
  }
}

从上面的示例可以看出，chainWebpack是通过链式调用的方式进行配置的，我们可以调用多个API来对Webpack配置进行修改或扩展。

总结

至此，关于“vue-cli3中vue.config.js配置教程详解”的攻略就分享完毕了。在实际应用中，我们可以根据自己的具体需求来修改vue.config.js的配置项，以满足项目的要求。同时，也可以在Vue社区或者Webpack官方文档中查找更多的Webpack配置项，进一步深入学习Vue项目的构建和优化。