多个页面或者多个项目共用一套vue-cli配置

需求:每个项目都只有一个页面,不可能每个页面都配一套脚手架

开始,冲冲冲!!!

项目目录文件: page1、page2、page3都是独立不相干的,需要独立编译

在这里插入图片描述

各文件配置

package.json

"scripts": {
    "serve-page1": "vue-cli-service serve --mode page1",
    "build-page1": "vue-cli-service build --mode page1",
    "serve-page2": "vue-cli-service serve --mode page2",
    "build-page2": "vue-cli-service build --mode page2"
  },

.env.page1

NODE_ENV = 'development'
page = 'page1'

.env.page2

NODE_ENV = 'development'
page = 'page2'

vue.config.js

// 时间戳
const Timestamp = new Date().getTime();

// getPages方法生成pages对象:指定需要打包的页面
function getPages(pageName) {
  let map = {};
  // 单页面
  map[pageName] = {
    entry: "src/pages/"+pageName+"/main.js",
    template: "public/index.html",
    filename: "index.html"
  }
  return map
}
const pages = getPages(process.env.page);
module.exports = {
  configureWebpack: {
    mode: 'production',// 打包时模式就要切换成生产模式
  },
  publicPath: "./",
  pages: pages,
  configureWebpack: { // webpack 配置
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `js/[name].${Timestamp}.js`,
      chunkFilename: `js/[name].${Timestamp}.js`
    },
  },
}

这样就ok啦,大佬们有更好的方法可以分享一下,特别是随着页面增多就要创建很多.env 文件


版权声明:本文为weixin_48321061原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。