【日常笔记】PC端项目整理

最近接手维护了一个基于vue Cli 3 构建的PC端单页项目，业务逻辑还没全部理清，项目框架理一下。

vue：vue2.5 + vue-router3.0 + vueX3.0

UI: iview3.4

一、页面基础布局

红色箭头指向的模块是固定的，左边展示模块根据路由渲染不同功能模块。

二、路由划分

嵌套路由，一个根路由下5个子路由。

 routes: [
        {
            path: '/',
            name: 'index',
            component: () => import(/* webpackChunkName: "index" */ './views/Index.vue'),
            children: [
                {
                    path: 'trial',
                    name: 'trial',
                    component: () => import(/* webpackChunkName: "trial" */ './views/Trial.vue'),
                },
                {
                    path: 'pendmedtion/:id',
                    name: 'pendmedtion',
                    component: () => import(/* webpackChunkName: "pendmedtion" */ './views/Pendmedtion.vue'),
                },
                {
                    path: 'videoCard/:id/:type/:inquery',
                    name: 'videoCard',
                    component: () => import(/* webpackChunkName:"videoCard" */ './views/VideoCard.vue'),
                },
                {
                    path: 'texturesCard/:id/:type/:inquery',
                    name: 'texturesCard',
                    component: () => import(/* webpackChunkName:"texturesCard" */ './views/TexturesCard.vue'),
                },
                {
                    path: 'plmTexturesCard/:id',
                    name: 'plmTexturesCard',
                    component: () => import(/* webpackChunkName:"plmTexturesCard" */ './views/PlmTexturesCard.vue'),
                },
            ],
        }
    ],

三、Babel 配置

module.exports = {
    presets: [['@vue/app', {
        polyfills: [
            'es6.promise',
            'es6.symbol',
        ],
        'useBuiltIns': 'entry',
        //'debug': true,
        'targets': {
            browsers: [
                '> 0.2%',
                'not dead',
                'Firefox > 20',
            ],
        },
    }]],
    plugins: [['import', {
        'libraryName': 'iview',
        'libraryDirectory': 'src/components',
    }]],
};

浏览器兼容：Firefox > 20，chrome，不兼容很久没更新的浏览器

指定执行环境 Browserslist，按下面的优先级使用：

@babel/preset-env 里的 targets
package.json 里的 browserslist 字段
.browserslistrc 配置文件

'useBuiltIns': 'entry',根据配置的浏览器兼容，引入浏览器不兼容的 polyfill。需要在入口文件手动添加 import '@babel/polyfill'，会自动根据 browserslist 替换成浏览器不兼容的所有 polyfill。

但我发现项目里并没有在入口文件导入'@babel/polyfill',然后注释掉重新启动发现报错，'fecha' of undefined,好像是iview引入的data.js导出有问题，后来查了一下据说是新的vue-cli 默认禁止了 commonjs语法，按照网上的解法安装@babel/plugin-transform-modules-commonjs插件，配置了一下，发现错误消失了，这就可以解释为啥这个项目里配了'useBuiltIns': 'entry',但没有单独引入polyfill,相当于'useBuiltIns': 'false',如果是这样的话那项目应该只兼容兼容性比较好的浏览器了。

因为'@vue/app'默认情况下是'useBuiltIns': 'usage'

三、骨架屏注入配置

vue-cli项目添加骨架屏多种方式，自动生成骨架屏

目前项目里是的是利用vue-server-rendererm将写好的模板编译并注入渲染模板

skeleton.entry.js

import Vue from 'vue';
import Skeleton from './Skeleton.vue';

export default new Vue({
    components: {
        Skeleton,
    },
    template: '<skeleton />',
});

webpack.skeleton.conf.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    target: 'node',
    entry: {
        skeleton: './src/skeleton.entry.js',
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: '[name].js',
        libraryTarget: 'commonjs2',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
        ],
    },
    externals: nodeExternals({
        whitelist: /\.css$/,
    }),
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
        },
        extensions: ['*', '.js', '.vue', '.json'],
    },
    plugins: [
        new VueLoaderPlugin(),
        new VueSSRServerPlugin({
            filename: 'skeleton.json',
        }),
    ],
};

skeleton.js

const fs = require('fs');
const { resolve } = require('path');
const htmlMinifier = require('html-minifier');
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer;

// 先把vue的模板文件index.html置换成标准的模板，防止骨架屏污染
let tempData = fs.readFileSync(resolve(__dirname, './public/template.html'), 'utf-8');
fs.writeFileSync('./public/index.html', tempData, 'utf-8');
console.log('模板注入完成');
// 读取`skeleton.json`，以`index.html`为模板写入内容
const renderer = createBundleRenderer(resolve(__dirname, './dist/skeleton.json'), {
    template: fs.readFileSync(resolve(__dirname, './public/index.html'), 'utf-8'),
});

// 把上一步模板完成的内容写入（替换）`index.html`
renderer.renderToString({}, (err, html) => {
    if (err) {
        console.log(err);
        return;
    }
    html = htmlMinifier.minify(html, {
        collapseWhitespace: true,
        minifyCSS: true,
    });
    fs.writeFileSync('./public/index.html', html, 'utf-8');
});
console.log('骨架屏注入完成');

"preserve": "webpack --config ./webpack.skeleton.conf.js && node skeleton.js",

【日常笔记】PC端项目整理

猜你喜欢