vcmqj-new

前端构建脚手架,webpack5，由于项目仅使用了 vue2.x 框架，所以仅对 vue 进行了处理

安装

npm i vcmqj-new -g
npm i vcmqj-new -D

目录配置

├─.babelrc //babel配置
├─.eslintrc.js //eslint配置
├─.gitignore
├─README.md
├─index.html  //通用模板
├─package.json
├─static  // 不需要变异的静态资源
├─src
|  ├─index.css
|  ├─index.js  //入口
|  ├─widgets  //业务组建
|  ├─views    //page组件
|  ├─router   //路由
|  ├─components  //通用组件
├─conf
|  ├─conf.js  //不分环境的公共配置,启动必会运行的配置
|  ├─proxy.js  //mocker数据请求代理
|  ├─mocker //mocker数据
|  ├─env   //每个人可根据各个环境进行不同配置

conf

可自定义使用 webpack 配置，domains 与 nomocker 不是 webpack 配置

// 开发环境
const webpack = require('webpack');

module.exports = {
  domains: {
    test1: 'http://test1.xxx.com/', //根据命令:test1所执行的文件
  },
  devServer: {
    proxy: {
      '/api': {
        target: 'http://xxxx.api.com', //没有加:指定代理时，默认代理
        changeOrigin: true,
      },
    },
  },
  nomocker: true, //是否启用模拟数据
  output: {
    publicPath: '/static',
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
  ],
};

// 生产环境
// 生产环境的静态资源跟运维配置有关，pablicpath需要跟服务器域名对应起来，
var webpack = require('webpack');
const CopyPackagePluginV5 = require('copy-package-plugin-v5');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

function resolve(dir) {
  return path.join(process.cwd(), dir);
}

module.exports = {
  output: {
    publicPath: '//xxx.com/目录',
  },
  plugins: [
    // 清除dist目录和output目录
    new CleanWebpackPlugin([resolve('output'), resolve('dist')], {
      allowExternal: true,
    }),

    // 用作部署使用，生成output/static和output/views，便于运维部署
    new CopyPackagePluginV5([
        {
            from: './dist/supplier',
            to: 'output/static/supplier'
        },
        {
            from: './dist/index.html',
            to: './output/views/index.html'
        },
        {
            from: './dist/index.html.gz',
            to: './output/views/index.html.gz'
        }
    ]),

    new CopyWebpackPlugin([
      //---这里将static文件输出到特定的文件夹
      {
        from: path.resolve(__dirname, '../../static'),
        to: path.resolve('dist/目录', 'assets'),
        ignore: ['.*'],
      },
    ]),
  ],
};

使用方式

// 创建基本项目
vcmqj-new -p [文件名]

// 开发环境
vcmqj-new -d [conf/env文件夹js文件名] :[运行文件名下的指定的domain]
vcmqj-new -d dev :test1  //即执行的是conf/env/dev.js下的test1代理

// 生产环境
vcmqj-new -b [conf/env文件夹js文件名]
vcmqj-new -b production //即执行的是conf/env/production.js
vcmqj-new -b production -a //开启分析

注意

1.7 版本之前不支持多个代理，即 1.6 的 domains，每个属性为字符串，只能代理一个域名，1.7 之后字符串改为了相对应的代理，可多个代理， 如：

  domains: {
    test1:{
      '/api':'http://test1.xxx.com'
    }
  },