vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

我将会详细讲解“vue-cli 3.0自定义vue.config.js文件，多页构建的方法”的完整攻略。

什么是vue-cli 3.0？

vue-cli是一个官方的Vue.js脚手架，它可以快速搭建一个完整的Vue.js开发环境，提供了现代化的构建工具和工作流程。

自定义vue.config.js文件

在使用vue-cli 3.0开发项目时，我们可以通过自定义vue.config.js文件来配置一些构建工具和工作流程的细节，例如：配置Webpack、配置代理、配置ESLint、配置打包选项等。

在项目根目录下创建一个vue.config.js文件，即会自动使用自定义配置文件来执行vue-cli-service的相关命令。

// vue.config.js文件
module.exports = {
  // ...
}

多页构建的方法

在单页面应用(SPA)之外，多页面应用（MPA）的需求也比较常见。Vue Cli通过配置pages属性，使项目可以支持多页应用，下面是多页构建的方法：

// vue.config.js文件
module.exports = {
  pages: {
    index: {
      entry: 'src/pages/index/index.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Index Page',
    },
    about: {
      entry: 'src/pages/about/about.js',
      template: 'public/about.html',
      filename: 'about.html',
      title: 'About Page',
    },
  }
}

在这个示例中，我们定义了两个页面：index和about。分别指定了对应的入口、模版、生成的文件名和页面标题。

接下来只要执行npm run serve，即可查看效果，生成的两个页面的入口分别为：

• http://localhost:8080/index.html
• http://localhost:8080/about.html

示例说明

除了上述的示例之外，我再来举两个多页构建的例子说明：

示例1：多语言网站

我们有一个需求是建立一个多语言网站，每种语言的页面都独立存在，例如：中文首页、英文首页，中文文章页、英文文章页等等。这时候，我们就可以通过vue.config.js来配置多个页面，实现多语言网站的构建。

// vue.config.js文件
module.exports = {
  pages: {
    zh_CN_index: {
      entry: 'src/pages/index/index.zh_CN.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: '中文首页'
    },
    en_US_index: {
      entry: 'src/pages/index/index.en_US.js',
      template: 'public/index.html',
      filename: 'en/index.html',
      title: 'English Home'
    },
    zh_CN_article: {
      entry: 'src/pages/article/article.zh_CN.js',
      template: 'public/article.html',
      filename: 'article.html',
      title: '中文文章页'
    },
    en_US_article: {
      entry: 'src/pages/article/article.en_US.js',
      template: 'public/article.html',
      filename: 'en/article.html',
      title: 'English Article'
    }
  }
}

示例2：多页面后台系统

我们有一个后台管理系统，系统包含了多个功能模块，例如：用户管理、订单管理、商品管理等等。这时候，我们需要将这些功能独立封装成单独的页面，并且每个页面都需要使用相同的头部和底部。这个时候，我们就可以通过vue.config.js来配置多个页面，实现多页面后台系统的构建。

// vue.config.js文件
module.exports = {
  pages: {
    user: {
      entry: 'src/pages/user/user.js',
      chunks: ['chunk-vendors', 'chunk-common', 'user'],
      template: 'public/layout.html',
      filename: 'user.html',
      title: '用户管理'
    },
    order: {
      entry: 'src/pages/order/order.js',
      chunks: ['chunk-vendors', 'chunk-common', 'order'],
      template: 'public/layout.html',
      filename: 'order.html',
      title: '订单管理'
    },
    product: {
      entry: 'src/pages/product/product.js',
      chunks: ['chunk-vendors', 'chunk-common', 'product'],
      template: 'public/layout.html',
      filename: 'product.html',
      title: '商品管理'
    }
  }
}

以上就是“vue-cli 3.0自定义vue.config.js文件，多页构建的方法”的攻略，希望对你有所帮助。