vcmqj

0.1.30 • Public • Published

vcmqj

名气家前端构建脚手架,webpack4,由于项目仅使用了 vue 框架,所以仅对 vue 进行了处理

安装

npm i vcmqj -g
npm i vcmqj -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 CopyPlugin = require('mqj/plugins/copy');
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 CopyPlugin([
      {
        from: 'dist',
        to: 'output/static',
        include: 'dist/目录',
      },
      {
        from: 'dist',
        to: 'output/views',
        exclude: 'dist/目录',
      },
    ]),

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

使用方式

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

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

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

注意

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i vcmqj

Weekly Downloads

1

Version

0.1.30

License

ISC

Unpacked Size

42.8 kB

Total Files

34

Last publish

Collaborators

  • demo-person2