huangshuwei / blog Goto Github PK

├─build 
├─src 
├─package.json
├─.babelrc
├─.eslintrc
├─jest.config.js
└─test 
      └─unit
          │
          ├─coverage
          │
          └─specs
               *.spec.js

$ npm install --save-dev @vue/test-utils

$ npm install --save-dev jest

$ npm install --save-dev vue-jest

$ npm install --save-dev babel-jest

{
  "presets": [["env", { "modules": false }]],
  "env": {
    "test": {
      "presets": [["env", { "targets": { "node": "current" } }]]
    }
  }
}

$ npm install --save-dev eslint-plugin-jest

...
"extends": [
    "plugin:jest/recommended" 
  ],
...

$ npm install --save-dev jest-serializer-vue

// jest.config.js
...
snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
...

// jest config

module.exports = {
    "verbose": true,
    /*
    * 1、显示代码覆盖率详细信息
    * 2、将测试用例结果输出到终端
    * */
    "collectCoverage": true,
    // 生成测试覆盖报告时检测的覆盖文件
    "collectCoverageFrom": [
        "src/**/*.{js,vue}",
        "!**/node_modules/**"
    ],
    // 覆盖率输出的目录
    "coverageDirectory":"test/unit/coverage",
    "moduleFileExtensions": [
        "js",
        "json",
        "vue"
    ],
    "transform": {
        // vue-jest 处理 vue 文件
        ".*\\.(vue)$": "vue-jest",
        // babel-jest 处理 js 文件
        "^.+\\.js$": "./node_modules/babel-jest"
    },
    // 测试套件文件的位置以及规则
    "testRegex": "(/test/unit/spec/.*|\\.(test|spec))\\.js$"
}

// package.json
...
"scripts":{
    "test":"jest --config ./jest.config.js"
}
...

npm run test

npm run test --watch

"homepage": "/"

<component
        :is="currentComp"
        v-bind="{name:'abc',address:'xxx'}"/>

<component
        :is="currentComp"
        :name="abc"
        :address="xxx"/>

// dynamic-comp.vue
<template>
    <component
        :is="currentComp"
        v-bind="propsOption"/>
</template>

<script>
    export default {
        name: "DynamicComp",
        props: {
            currentComp: {
                type: String,
                required: true
            },
            // props 以对象方式传递
            propsOption: {
                type: Object,
                required: false,
                validator:function (val) {

                    return Object.prototype.toString.apply(val) === "[object Object]"
                }
            }
        }
    }
</script>

// any.vue
<template>
    <dynamic-comp
        :props-option="propsOption"
        current-comp="testComp"/>
</template>
<script>
    import dynamicComp from './dynamic-comp'

    export default {
        components: {dynamicComp},
        data() {

            return {
                propsOption: {
                    prop1: "tome",
                    prop2: 123
                }
            }
        }
    }
</script>

import {HashRouter as Router} from 'react-router-dom'

import {BrowserRouter as Router} from 'react-router-dom'

$ npm install -g verdaccio

$ yarn global add verdaccio

$ verdaccio

 warn --- config file  - C:\Users\shuwei\AppData\Roaming\verdaccio\config.yaml
 warn --- Plugin successfully loaded: htpasswd
 warn --- Plugin successfully loaded: audit
 warn --- http address - http://localhost:4873/ - verdaccio/3.2.0

verdaccio --listen 4001 --config C:\Users\shuwei\AppData\Roaming\verdaccio\config.yaml

warn --- config file  - C:\Users\shuwei\AppData\Roaming\verdaccio\config.yaml
 warn --- Plugin successfully loaded: htpasswd
 warn --- Plugin successfully loaded: audit
 warn --- http address - http://localhost:4001/ - verdaccio/3.2.0

# listen
listen:127.0.0.1:4001

http <-- 200, user: undefined(127.0.0.1), req: 'GET /', bytes: 0/1021
 http <-- 200, user: undefined(127.0.0.1), req: 'GET /-/static/7.style.539cab9c31ffba25da18.css', bytes: 0/1068
 http <-- 200, user: undefined(127.0.0.1), req: 'GET /-/static/manifest.d3c41f9bbed51d4d9491.js', bytes: 0/1470
 http <-- 200, user: undefined(127.0.0.1), req: 'GET /-/static/0.style.b86c5878ee2935af83e9.css', bytes: 0/41336
 http <-- 200, user: undefined(127.0.0.1), req: 'GET /-/static/main.d3c41f9bbed51d4d9491.js', bytes: 0/13897

storage: ./storage
auth:
  htpasswd:
    file: ./htpasswd
uplinks:
  npmjs:
    url: https://registry.npmjs.org/
packages:
  '@*/*':
    access: $all
    publish: $authenticated
    proxy: npmjs
  '**':
    proxy: npmjs
logs:
  - {type: stdout, format: pretty, level: http}

$ npm install -g nrm

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
  sinopia  http://127.0.0.1:4875/

nrm add verdaccio http://127.0.0.1:4001

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
  sinopia  http://127.0.0.1:4875/
  verdaccio  http://127.0.0.1:4001/

nrm use verdaccio 

verb config Skipping project config: C:\Users\shuwei/.npmrc. (matches userconfig)
Registry has been set to: http://127.0.0.1:4001/

npm adduser --registry http://127.0.0.1:4001

//127.0.0.1:4001/:_authToken="7/UcJFBzhDqvOkifY/32CA==

shuwei:$65I6KH/.1F1w:autocreated 2018-07-14T09:42:33.433Z

npm publish

npm notice
npm notice package: [email protected]
npm notice === Tarball Contents ===
npm notice 272B  package.json
npm notice 566B  index.js
npm notice 75B   readme.md
npm notice 155B  .idea/inspectionProfiles/Project_Default.xml
npm notice 458B  .idea/local-mod.iml
npm notice 174B  .idea/misc.xml
npm notice 270B  .idea/modules.xml
npm notice 8.4kB .idea/workspace.xml
npm notice === Tarball Details ===
npm notice name:          local-mod
npm notice version:       1.0.0
npm notice package size:  3.2 kB
npm notice unpacked size: 10.4 kB
npm notice shasum:        7c3e8c623ee0ce9527a872069767c8c97e30b3d0
npm notice integrity:     sha512-6in/3sB7lQnzk[...]f6qNbMw/4v+ow==
npm notice total files:   8
npm notice
+ [email protected]

$ npm install local-mod --save-dev

packages:
  '@*/*':
    # scoped packages
    
    # defalut $all
    access: $authenticated 
    publish: $authenticated
    proxy: npmjs

  'local-*':
    # allow all users (including non-authenticated users) to read and
    # publish all packages
    #
    # you can specify usernames/groupnames (depending on your auth plugin)
    # and three keywords: "$all", "$anonymous", "$authenticated"
    
    # defalut $authenticated
    access: $authenticated

    # allow all known users to publish packages
    # (anyone can register by default, remember?)
    publish: shuwei1

    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs

error: user shuwei1 is not allowed to publish package local-mod

npm adduser --registry http://127.0.0.1:4001

@import '~antd/dist/antd.css';

$ cd /path/my-cli
$ npm link

  upstream test {
        server localhost:8080; // 不能包含协议
        server localhost:8081;
    }
    server {
        listen       81;                                                        
        server_name  localhost;                                              
        client_max_body_size 1024M;

        location / {
            proxy_pass http://test; // 配置的名字要和upstream  后面的名字一致
            proxy_set_header Host $host:$server_port;
        }
    }

 upstream test {
        server localhost:8080;
        server localhost:8081;
    }

 upstream test {
        server localhost:8080 weight=9;
        server localhost:8081 weight=1;
    }

  upstream test {
        ip_hash;
        server localhost:8080;
        server localhost:8081;
    }

 upstream backend {
        fair;
        server localhost:8080;
        server localhost:8081;
    }

    upstream backend {
        hash $request_uri;
        hash_method crc32;
        server localhost:8080;
        server localhost:8081;
    }

npm i oracledb

EMVST =
  (DESCRIPTION =
    (ADDRESS = (PROTOCOL = TCP)(HOST = 172.16.xx.xxx)(PORT = xxxx))
    (CONNECT_DATA =
      (SERVER = DEDICATED)
      (SERVICE_NAME = xxxxx)
    )
  )

// babel.config.js
module.exports = {
    presets: [
        ["@vue/app",
            {
                "useBuiltIns": "entry"
            }
        ],
    ]
...
}

yarn add @babel/polyfill

 import '@babel/polyfill'

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

// babel.config.js
module.exports = {
    presets: [
        [
            "@vue/app",
            {
                useBuiltIns: "entry",
                corejs: 3,
                targets: {
                    ie: "11"
                },
                jsx: {
                    injectH: false
                }
            }
        ]
    ]
...
}

yarn add core-js regenerator-runtime

import "core-js/stable";
import "regenerator-runtime/runtime";

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

// vue.config.js
module.exports = {
  transpileDependencies: ["highlight.js"];
  ...

}

<template>
  <div class="v-table">
    this is a table comp.
  </div>
</template>

<script>
export default {
  name: "VTable"
};
</script>

import VTable from "v-table.vue";

Vue.component("VTable",VTable);

import VTable from "v-table.vue";

Vue.component(VTable.name,VTable);

// index.js
import VTable from "./v-table.vue";

VTable.install = function(Vue) {
  Vue.component(VTable.name, VTable);
};

export default VTable;

import VTable from "index.js";
Vue.use(VTable );

"workbench.editor.enablePreview": false
"workbench.editor.enablePreviewFromQuickOpen": false

{
  "create vue template": {
    "prefix": "vue",
    "body": [
      "<template>",
      "\t<div class='$2'></div>",
      "</template>",
      "",
      "<script>",
      "",
      "export default {",
      "\tname: '$1',",
      "\tcomponents: {},",
      "\tprops: {},",
      "\tdata() {",
      "\t\treturn {",
      "",
      "\t\t};",
      "\t},",
      "\tcomputed: {},",
      "\twatch: {},",
      "\tmethods: {",
      "",
      "\t},",
      "\tcreated() {",
      "",
      "\t},",
      "\tmounted() {",
      "",
      "\t},",
      "}",
      "</script>",
      "<style lang='$3'>",

      "</style>"
    ],
    "description": "自定义 vue 模板"
  }
}

// child comp
...
name:"child-comp"
mounted:{
    this.emit("valueChange",args)
}
...

// parent comp
...
methods:{
   change(){}
},
render(){
    return <child-comp onValueChange={()=>this.change()} />
}
...

// child comp
...
name:"child-comp"
mounted:{
    this.emit("onValueChange",args)
}
...

// parent comp
...
methods:{
   change(){}
},
render(){
    return <child-comp propsOnValueChange={()=>this.change()} />
}
...

// parent comp
...
methods:{
   change(){}
},
render(){
    return <child-comp {
        ...{
            props:{
                 onValueChange={()=>this.change()}
               }
          }
    } />
}
...

import { BrowserRouter as Router,Link} from 'react-router-dom';

...
render(){
   return (
      <Router>
        <ul>
          <li>
             <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/order">订单</Link>
          </li>
        </ul>
      </Router>
    )
}
...

import { Redirect } from 'react-router-dom';

...
render(){
   if (isLogin){
      
       return <Redirect to='/home' />;
    }else{
      
          return <Redirect to='/login' />;
    }
}
...

import { withRouter } from 'react-router-dom';

class demoComp extends React.Component{

    constructor(props) {
        super(props);
        
    }
    
    goToHomePage = ()=>{

        this.props.history.push('/home')
    }
    
    render() {
    
        return (
            
            <button onClick={this.goToHomePage}>跳转首页</button>
        )
    }
}

export default withRouter(demoComp)

electron/resources/app
├── package.json
├── main.js
└── index.html

$ npm install -g asar

$ asar pack your-app app.asar

$ npm install npm -g

$ npm config get cache

$ npm config set cache "D:\Program Files\npm-cache"

$ npm config get prefix

$ npm config set prefix "D:\Program Files\npm-global"

$ npm outdated

$ npm update

$ npm outdated

$ npm install [email protected] --save

$ npm install [email protected] --save-dev

$ npm outdated

$ npm outdated -g --depth=0

$ npm update -g

npm install -g webpack

$ npm audit

$ npm view react versions

$ npm i -g nrm

$ nrm ls

$ nrm use taobao

npm publish

$ nrm use npm

$ npm config set proxy=你的代理服务

$ npm config get proxy

$ npm config delete proxy

...
  state: {
             arr: [
                {name: 'a', id: 0}
            ]
        },
   mutations: {

       addArrayItem(state, {arrItem}) {

           state.arr.push(arrItem)
        }
   }
...

...
  state: {
             arr: [
                {name: 'a', id: 0}
            ]
        },
   mutations: {

       addArrayItem(state, {index, arrItem}) {

             state.arr.splice(index, 0, arrItem)
       }
   }
...

...
  state: {
             arr: [
                {name: 'a', id: 0}
            ]
        },
   mutations: {

       updateArrayItem(state, {arrItem}) {

                const index = state.arr.findIndex(item => item.id === arrItem.id);
                state.arr.splice(index,1,arrItem)
          }
   }
...

...
  state: {
             arr: [
                {name: 'a', id: 0}
            ]
        },
   mutations: {

       updateArrayItem(state, {arrItem}) {

                const index = state.arr.findIndex(item => item.id === arrItem.id);
                Vue.set(state.arr, index, arrItem);
          }
   }
...

...
  state: {
             arr: [
                {name: 'a', id: 0}
            ]
        },
   mutations: {

       updateArrayItem(state, {arrItem}) {

                const item = state.arr.find(item=> item.id === arrItem.id);
                Object.assign(item, arrItem);
          }
   }
...

...
  state: {
             arr: [
                {name: 'a', id: 0}
            ]
        },
   mutations: {

       removeArrayItem(state, {arrItem}) {

                const index = state.arr.findIndex(item => item.id === arrItem.id);
                state.arr.splice(index, 1)
          }
   }
...

"svn.path": "C:\\Program Files\\TortoiseSVN\\bin\\svn.exe"

yarn add [email protected]

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

scoop help

npm install remotedebug-ios-webkit-adapter -g

remotedebug_ios_webkit_adapter --port=9000

scoop install ios-webkit-debug-proxy

scoop bucket add extras

// webpack.config.js
     {
                test: /\.(css|postcss|sass|scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },

// webpack.config.js
       {
                test: /\.(postcss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.(css|sass|scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                    'resolve-url-loader'
                ]
            }

yarn init

yarn 

yarn install

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

yarn global add create-react-app

yarn add [package] --dev
yarn add [package] --peer
yarn add [package] --optional

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

yarn remove [package]

yarn global dir

yarn cache dir

yarn config set cache-folder  "D:\yarn-cache"

首先克隆一份到你的本地
$ git clone https://github.com/huangshuwei/webpackForSPA.git

然后 cd 到 ‘webpackForSPA’目录下
$ cd webpackForSPA

接着你可以运行不同的命令查看结果

发布模式：
$ npm run build

开发模式：
$ npm run dev

热更新模式
$ npm run dev-hrm

如果使用了热更新模式，并且想要结合后端服务形式运行，那么cd 到‘mockServer’目录下，并执行node 服务：
$ cd mockServer

$ node server.js

// package.json 文件
...
"scripts": {
    "build": "webpack  --profile --progress --colors --display-error-details",
    "dev": "webpack  --display-modules --profile --progress --colors --display-error-details",
    "dev-hrm": "webpack-dev-server --config"
  },
...

// 开发模式
npm run dev

// 热更新模式
npm run dev-hrm

// 发布模式
npm run build

// webpack.config.js

// 获取当前运行的模式
var currentTarget = process.env.npm_lifecycle_event;

var debug,          // 是否是调试
    devServer,      // 是否是热更新模式
    minimize;       // 是否需要压缩

if (currentTarget == "build") { // 发布模式

    debug = false, devServer = false, minimize = true;
    
} else if (currentTarget == "dev") { // 开发模式

    debug = true, devServer = false, minimize = false;
    
} else if (currentTarget == "dev-hrm") { // 热更新模式

    debug = true, devServer = true, minimize = false;
}

// webpack.config.js
...
plugins:[
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: __dirname + '/src/index.html',
        inject: 'true'
    }),
    new HtmlWebpackPlugin({
        filename: 'html/hrm.html',
        template: __dirname + '/src/html/hrm.html',
        inject: false,
    }),
    new HtmlWebpackPlugin({
        filename: 'html/home.html',
        template: __dirname + '/src/html/home.html',
        inject: false,
    }),
]
...

// webpack.config.js
var CleanWebpackPlugin = require('clean-webpack-plugin');

// webpack.config.js
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

#
# This is the default config file. It allows all users to do anything,
# so don't use it on production systems.
#
# Look here for more config file examples:
# https://github.com/rlidwka/sinopia/tree/master/conf
#

# path to a directory with all packages
storage: ./storage // npm包存放的路径

auth:
  htpasswd:
    file: ./htpasswd // 保存用户的账号密码等信息
    # Maximum amount of users allowed to register, defaults to "+inf".
    # You can set this to -1 to disable registration.
    #max_users: 1000

# a list of other known repositories we can talk to
uplinks:
  npmjs:
    url: https://registry.npmjs.org/ //拉取公共包的地址源，默认为npm的官网，可以使用淘宝的npm镜像地址

packages: // 配置权限管理
  '@*/*':
    # scoped packages
    access: $all
    publish: $authenticated

  '*':
    # allow all users (including non-authenticated users) to read and
    # publish all packages
    #
    # you can specify usernames/groupnames (depending on your auth plugin)
    # and three keywords: "$all", "$anonymous", "$authenticated"
    access: $all

    # allow all known users to publish packages
    # (anyone can register by default, remember?)
    publish: $authenticated

    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs

# log settings
logs:
  - {type: stdout, format: pretty, level: http}
  #- {type: file, path: sinopia.log, level: info}

# listen
listen: xxx.xxx.xxx.xxx:4873

$ npm adduser --registry http://localhost:4873/

 npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

nrm add sinopia http://xxx.xxx.xxx.xxx:4873

verb config Skipping project config: C:\Users\shuwei/.npmrc. (matches userconfig)
Registry has been set to: http:// xxx.xxx.xxx.xxx:4873/

  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
* sinopia  http://xxx.xxx.xxx.xxx:4873/

$ npm adduser

$ npm publish

$ npm install test-private-mod --save-dev

npm notice
npm notice package: test-private-mod
npm notice === Tarball Contents ===
npm notice 282B  package.json
npm notice 566B  index.js
npm notice 50B   readme.md
npm notice 155B  .idea/inspectionProfiles/Project_Default.xml
npm notice 174B  .idea/misc.xml
npm notice 280B  .idea/modules.xml
npm notice 458B  .idea/private-module.iml
npm notice 8.5kB .idea/workspace.xml
npm notice 732B  test-mod/url/parseQueryString.js
npm notice 648B  test-mod/url/stringfyQueryString.js
npm notice === Tarball Details ===
npm notice name:          test-private-mod
npm notice version:       1.0.0
npm notice package size:  3.8 kB
npm notice unpacked size: 11.8 kB
npm notice shasum:        fe1d72fb344483f6c04093d11bc25d221ab97f57
npm notice integrity:     sha512-4KMWOQbgOIfaP[...]dazor3nQdKxxQ==
npm notice total files:   10
npm notice
+ test-private-mod

$ yarn init

yarn add webpack --dev

yarn add webpack-cli --dev

$ karma init

├─build 
│      webpack.test.config.js
│
├─src 
│
├─package.json
│
└─test 
      └─unit
          │  index.js
          │  karma.config.js
          │
          ├─coverage
          │
          └─specs
               *.spec.js

 // package.json
 "scripts": {
    "test": "karma start test/unit/karma.config.js --single-run"
  }

// store/index.js
import page1 from "./modules/page1.js";
import page2 from "./modules/page2.js";
import page3 from "./modules/page3.js";
import page4 from "./modules/page4.js";
import page5 from "./modules/page5.js";

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    modules: { // 每个路由对应的 module
        page1,
        page2,
        page3,
        page4,
        page5
    },
    plugins: __DEV__ ? [createLogger()] : [],
    strict: __DEV__ ? true : false
});

// store/modules/page1.js
const state = {
     // 列表数据
     page1Data: [],
     // 标题数据
     page1Title: ''
}

// store/modules/page1.js

// 放置你要重置的数据
const initState = {

    page1Data: [],
}

// state
const state = {
    // 参数解构
    ...initState,

    // 路由改变不想重置的数据
    page1Title: '',

    initState(){

        return initState
    }
}

// store/types.js
export const RESET_STATES = 'resetStates'

// store/mutation.js

import * as types from './types'

// 检测所有的 state 并把 `initState()` 中的属性重置
function resetState(state, moduleState) {

    const mState = state[moduleState];

    if (mState.initState && typeof mState.initState === 'function') {

        const initState = mState.initState();

        for (const key in initState) {

            mState[key] = initState[key];
        }
    }

}

export default {

    [types.RESET_STATES](state, payload) {

        for (const moduleState in state) {

            resetState(state, moduleState);
        }
    },

}

// store/action.js
import * as types from './types'

export default {
    // rest state action
    resetStates:function (context, payLoad) {

        context.commit(types.RESET_STATES, payLoad);
    }
}

// components/app.vue
<script>
    import {mapState, mapActions} from "vuex"
    export default{

        methods: {

            ...mapActions({
                resetStates: "resetStates"
            })
        },

        watch: {

            $route(to, from) {
                // 路由改变发起重置
                this.resetStates();
            }
        }
    }
</script>

yarn add <package...> [--peer/-P]

server {  
        listen       80;                                                        
        server_name  localhost;                                              

        location / {
            proxy_pass http://localhost:8080;
            proxy_set_header Host $host:$server_port;
        }
}

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

// package.json
 "scripts": {
    "dev": "webpack-dev-server  --env.dev --history-api-fallback"
  }

// webpack.config.js
devServer:{
  ...
 historyApiFallback: true
}

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
            <match url="(.*)" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        
        <rule name="single app rule" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
        
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

<action type="Rewrite" url="/home.html" />

<Router basename='/folder1'>

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        
      <!--文件夹1-重写-->
        <rule name="folder1 rule" stopProcessing="true">
          <match url="folder1/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder1/index.html" />
        </rule>
        
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

<Router basename='/folder2'>

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>

        <!--文件夹1-重写-->
        <rule name="folder1 rule" stopProcessing="true">
          <match url="folder1/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder1/index.html" />
        </rule>

        <!--文件夹2-重写-->
        <rule name="folder2 rule" stopProcessing="true">
          <match url="folder2/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder2/index.html" />
        </rule>

      </rules>
    </rewrite>
  </system.webServer>
</configuration>

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>

        <!--文件夹1-重写-->
        <rule name="folder1 rule" stopProcessing="true">
          <match url="folder1/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder1/index.html" />
        </rule>

        <!--文件夹2-重写-->
        <rule name="folder2 rule" stopProcessing="true">
          <match url="folder2/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder2/index.html" />
        </rule>

        <!--默认站点-跳转-规则（跳转到‘文件夹1’的地址）-->
        <rule name="root" stopProcessing="true">
          <match url="^$" />
          <action type="Redirect" url="/folder1" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

 <Router basename='folder1-new'>

...
 <!--folder1-new-重写-规则-->
        <rule name="folder1-new rewrite rule" stopProcessing="true">
          <match url="folder1-new/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder1-new/index.html" />
        </rule>
...

  <!--folder1-跳转-规则（跳转到folder1的新地址）-->
        <rule name="folder1 rewrite rule" stopProcessing="true">
           <match url="folder1/" />
           <action type="Redirect" url="/folder1-new" />
        </rule>

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>

        <!--folder1-new-重写-规则-->
        <rule name="folder1-new rewrite rule" stopProcessing="true">
          <match url="folder1-new/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder1-new/index.html" />
        </rule>

         <!--文件夹2-重写-->
        <rule name="folder2 rule" stopProcessing="true">
          <match url="folder2/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder2/index.html" />
        </rule>

        <!--folder1-跳转-规则（跳转到folder1的新地址）-->
        <rule name="folder1 rewrite rule" stopProcessing="true">
           <match url="folder1/" />
           <action type="Redirect" url="/folder1-new" />
        </rule>

        <!--默认站点-跳转-规则（跳转到‘文件夹1’的地址）-->
        <rule name="root" stopProcessing="true">
          <match url="^$" />
          <action type="Redirect" url="/folder1" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

yarn add less less-loader

// webpack.config.renderer.dev.babel.js
// [custome] Add LESS support-当是 .global.less 文件时,作为全局样式引入
            {
                test: /\.global\.less$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true,
                            javascriptEnabled: true
                        }
                    }
                ]
            },
            // [custome] Add LESS support-当是非 .global.less 文件时，作为css module样式引入
            {
                test: /^((?!\.global).)*\.less$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName:
                                    '[name]__[local]__[hash:base64:5]'
                            },
                            sourceMap: true,
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true,
                            javascriptEnabled: true
                        }
                    }
                ]
            },

// [custome] Add LESS support-当是 .global.less 文件时,作为全局样式引入
            {
                test: /\.global\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true,
                            javascriptEnabled: true
                        }
                    }
                ]
            },
            // [custome] Add LESS support-当是非 .global.less 文件时，作为css module样式引入
            {
                test: /^((?!\.global).)*\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName:
                                    '[name]__[local]__[hash:base64:5]'
                            },
                            sourceMap: true,
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true,
                            javascriptEnabled: true
                        }
                    }
                ]
            }

// antd-theme-reset.global.less
@import '~antd/dist/antd.less';
@primary-color: #ea5404; // 全局主色
@link-color: orange; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号

// index.tsx
import '你的目录/antd-theme-reset.global.less'

<template>
   <third-comp v-if="reFresh"/>
</template>

<script>
   export default{
       data(){
          return {
                reFresh:true,
                menuTree:[]
            }
       },
       watch:{
             menuTree(){

                  this.reFresh= false
                  this.$nextTick(()=>{
                    
                    this.reFresh = true
                })
            }
       }
}
</script>

<template>
   <third-comp :key="menuKey"/>
</template>

<script>
   export default{
       data(){
          return {
                menuKey:1
            }
       },
       watch:{
             menuTree(){

                ++this.menuKey
            }
       }
}
</script>

module.exports = {
  //...
  externals: [
    {
      // 字符串
      react: 'react',
      // 对象
      lodash : {
        commonjs: 'lodash',
        amd: 'lodash',
        root: '_' // indicates global variable
      },
      // 字符串数组
      subtract: ['./math', 'subtract']
    },
    // 函数
    function(context, request, callback) {
      if (/^yourregex$/.test(request)){
        return callback(null, 'commonjs ' + request);
      }
      callback();
    },
    // 正则表达式
    /^(jquery|\$)$/i
  ]
};

watch:{

    $route(to, from) {

                let scrollContent = document.querySelector('.scroll-content');

                if (scrollContent){

                    scrollContent.scrollTop = 0;
                    scrollContent.scrollLeft = 0;
                }
            }
}

router.afterEach((to, from) => {

   let scrollContent = document.querySelector('.scroll-content');

    if (scrollContent){

        scrollContent.scrollTop = 0;
        scrollContent.scrollLeft = 0;
    }
})

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // 路由切换，简单的让页面滚动到顶部
   return { x: 0, y: 0 }
  }
})