vue cli 3.0通用打包配置代码,不分一二级目录

下面我将详细讲解“vue cli 3.0通用打包配置代码,不分一二级目录”的完整攻略。

一、简介

Vue CLI是一个基于Vue.js进行快速开发的完整系统，它包含了实现了项目脚手架、插件体系、可视化界面的一套构建工具。其中，Vue CLI 3.0是Vue CLI的更新版本，其对代码结构进行了调整。

在Vue CLI 3.0中，我们可以使用vue.config.js文件来配置项目的打包等相关操作。本攻略将详细讲解如何使用vue.config.js对项目进行打包的通用配置，且不分一、二级目录。

二、通用打包配置代码

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add(resolve('src'))
        .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        return options
      })
    config.plugin('html')
      .tap(args => {
        args[0].title = 'Your Project Title'
        return args
      })
  },
  devServer: {
    open: true,
    port: 8080,
  }
}

上面的代码是在项目的根目录下的vue.config.js文件中插入的通用打包配置代码。接下来，我们将详细解释其中的每一个配置。

• publicPath：指定打包后static资源的引用路径，前缀一般为'/'。
• outputDir：打包后生成的文件目录名称，默认为'dist'。
• assetsDir：生成打包后的静态文件目录名称，默认为'static'。
• lintOnSave：开发环境下是否开启ESlint检查，目前已弃用。
• productionSourceMap：打包后是否生成sourceMap文件，默认为false，表示不生成sourceMap文件。
• configureWebpack：用于修改webpack配置，通过resolve.alias可以使import的路径变短且可读性更高。
• chainWebpack：用于进一步修改webpack配置，可以通过config.module.rule来指定打包时对某些文件的特殊行为，如babel的转码等操作。其中，config.plugin.html用于设置打包后的html文件的title等属性。
• devServer：开发环境下的一些配置，如open表示打开浏览器，port表示指定端口号。

三、示例说明

示例1：打包Vue2.x项目

以一个简单的Vue2.x项目为例，首先需要在项目的根目录下新建一个vue.config.js文件，然后将上面的通用打包配置代码复制到文件中。

接着，需要在命令行中执行以下命令来进行打包：

npm run build

打包完成后，可以在dist目录中看到生成的静态资源文件。

示例2：打包Vue3.x项目

以一个使用了Vue3.x的项目为例，同样需要在项目的根目录下创建vue.config.js文件，并将通用打包配置代码复制到文件中。

与Vue2.x不同的是，在Vue3.x中，需要在configureWebpack中添加target: 'es6'的配置：

configureWebpack: {
  resolve: {
    alias: {
      '@': resolve('src')
    }
  },
  target: 'es6'
}

然后，执行以下命令进行打包：

npm run build

打包完成后，同样可以在dist目录中看到生成的静态资源文件。

经过以上示例的介绍，您应该能够对“vue cli 3.0通用打包配置代码,不分一二级目录”的攻略有更加深入的了解了。