关于前端:基于webpack的构建方案引入vue后的相关配置

之前有一套 h5 的前端构建计划，可能反对同时治理构建多个绝对独立的 h5。在面对大量的，绝对独立的流动营销型 h5 时，这个解决方案十分实用 h5-webp。

因为我的项目相对来说简略，所以始终采纳命令式渲染形式，这显然是不太正当的。一旦遇到简单的我的项目，会有大量状态治理，路由治理，频繁的 dom 操作等，这时候咱们须要引入一套申明式渲染计划。

因为是对已有构建计划的降级，所以首选渐进式框架 vue。
渐进式框架的了解很喜爱的一段话 传送门

装置依赖

在实际过程中，首先尝试了 vue2 稳定版，然而思考到 vue3 的降级变动比拟大，最初还是决定采纳 vue3。

vue2 的依赖装置：

npm install vue -S
npm install vue-loader -D
npm install vue-template-compiler -D
npm install vue-router -S

如果你想用最新的 vue3：

npm install vue@next -S
npm vue-loader@16.0.0-beta.4 -D 以后须要自行指定版本
npm @vue/compiler-sfc -D
npm install vue-router@next -S

每个 vue 包的新版本公布时，一个相应版本的 vue-template-compiler 也会随之公布。编译器的版本必须和根本的 vue 包放弃同步，这样 vue-loader 就会生成兼容运行时的代码。这意味着你每次降级我的项目中的 vue 包时，也应该匹配降级 vue-template-compiler。

webpack 配置 vue 组件加载器

// 如果你抉择的是 vue2
// const VueLoaderPlugin = require('vue-loader/lib/plugin’);
// 如果你抉择最新的 vue3
const {VueLoaderPlugin} = require('vue-loader’); 

let config = {
    module: {
        rules: [
            { 
                test: /\.vue$/,
                loader: 'vue-loader'
            }, 
            …
        ]
    },
    plugins: [new VueLoaderPlugin(),
        ...
    ]
};

vue3 路由的配置

import Vue from "vue";
import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'

const routes = [
    {
        path: "/",
        redirect: "/index"
    },
    ...
];

const router = createRouter({
    // mode: 'history', // vue2 路由模式的配置形式
    // history: createWebHistory(), // history 模式
    history: createWebHashHistory(), // hash 模式
    routes
});

export default router;

这里须要留神一下，这里 vue3 对于 hash / history 两种路由配置形式与 vue2 是不同的。