多个页面或者多个项目共用一套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 文件

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值