Vue.js 中的 vue-cli3 工程构建实战

前言

Vue.js 是一款流行的前端 JavaScript 框架，它具有易学易用、高效灵活、生态丰富等优点，受到了众多前端开发者的喜爱。而 vue-cli3 则是 Vue.js 官方推出的工程构建工具，它可以帮助我们快速创建 Vue.js 项目，并提供了丰富的插件和配置选项，让我们能够更加便捷地进行开发。

本文将介绍如何使用 vue-cli3 工具构建 Vue.js 项目，并结合实例代码详细讲解其中的各项配置和使用技巧，希望能够帮助读者更好地掌握 Vue.js 开发。

安装和使用 vue-cli3

在开始使用 vue-cli3 之前，我们需要先安装 Node.js 和 npm，这两个工具将成为我们使用 vue-cli3 的基础。安装好 Node.js 和 npm 后，我们就可以通过 npm 命令来安装 vue-cli3 了：

npm install -g @vue/cli

安装完成后，我们可以使用 vue 命令来创建 Vue.js 项目：

vue create my-project

其中，my-project 是我们要创建的项目名称，可以根据实际情况进行修改。执行上述命令后，vue-cli3 工具会自动下载并安装所需的依赖包，然后询问我们要使用哪种配置方案（如 Babel、TypeScript、ESLint 等），以及要不要安装推荐的插件等等。根据自己的需求进行选择即可。

配置文件详解

在使用 vue-cli3 创建项目时，它会自动生成一些默认的配置文件，比如 package.json、vue.config.js 等。这些文件中包含了许多重要的配置信息，下面我们来逐一介绍它们的作用和使用方法。

package.json

package.json 文件是 Node.js 中的一个重要文件，它用于描述项目的基本信息和依赖关系等。在使用 vue-cli3 创建项目时，它会自动生成一个默认的 package.json 文件，我们可以在其中添加或修改项目的相关配置信息。

比如，我们可以在 package.json 文件中添加如下命令：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

这样，我们就可以通过 npm run serve 命令来启动开发服务器，通过 npm run build 命令来构建项目，通过 npm run lint 命令来进行代码风格检查等。

vue.config.js

vue.config.js 文件是 vue-cli3 中的一个配置文件，它用于配置各种构建和开发过程中的选项和插件。下面我们来详细介绍其中的各项配置。

publicPath

publicPath 用于指定项目的公共路径，它会影响到构建后静态资源文件的访问路径。比如，我们可以将 publicPath 设置为：

module.exports = {
  publicPath: '/my-project/'
}

这样，构建后的静态资源文件就会被访问到 http://your-domain.com/my-project/ 目录下。

outputDir

outputDir 用于指定构建后的输出目录，默认为 dist。我们可以将 outputDir 设置为其他目录，比如：

module.exports = {
  outputDir: 'build'
}

这样，构建后的文件就会被输出到项目根目录下的 build 目录中。

devServer

devServer 用于配置开发服务器的选项，比如端口号、代理等。比如，我们可以将 devServer 配置为：

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

这样，开发服务器就会在本地的 8080 端口上运行，并将所有以 /api 开头的请求转发到 http://localhost:3000 服务上。

chainWebpack

chainWebpack 用于配置 webpack 的链式操作，比如添加新的 loader、plugin 等。比如，我们可以在 chainWebpack 中添加如下代码：

module.exports = {
  chainWebpack: config => {
    config.module.rule('md')
      .test(/\.md$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  }
}

这样，我们就可以在项目中使用 .md 文件，并将其转换为 HTML 页面进行展示。

示例代码

下面是一个简单的示例代码，用于演示如何使用 vue-cli3 构建 Vue.js 项目：

<!-- App.vue -->
<template>
  <div class="app">
    <h1>{{ message }}</h1>
    <p>当前计数器的值为：{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

// package.json
{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-eslint": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^7.20.0",
    "vue-template-compiler": "^2.6.11"
  }
}

// vue.config.js
module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  },
  chainWebpack: config => {
    config.module.rule('md')
      .test(/\.md$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  }
}

总结

本文介绍了如何使用 vue-cli3 工具构建 Vue.js 项目，并详细讲解了其中的各项配置和使用技巧。希望读者能够通过本文的介绍，更好地掌握 Vue.js 开发，提高自己的技术水平。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bf28dbadd4f0e0ff8af67f