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

Posted 2021-09-16 塞德·乌漆玛黑

之前有一套 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 是不同的。