乐趣区

关于前端:一份关于VueCli5常用配置开发模板可用作于PC网站开发移动端网页后台管理系统开箱即用

jiezi

Vue-cli5

Vue CLI 是一个基于 Vue.js 进行疾速开发的残缺零碎，提供：

  • 通过 @vue/cli 实现的交互式的我的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
  • 一套齐全图形化的创立和治理 Vue.js 我的项目的用户界面

装置依赖

npm install

如果本地网络卡顿，应用长期镜像，当命令行窗口敞开即生效

npm --registry http://mirrors.cloud.tencent.com/npm/ install express

开发模式

npm run dev 
or
npm run serve

打包模式

npm run build

主动上传

须要在 gulpfile.js 配置服务器信息

npm run upload

我的项目配置性能

  • ✅开启文件 Gzip 压缩
  • ✅编译去掉正文
  • ✅开发服务配置
  • ✅编辑器别名设置
  • ✅配置环境变量
  • ✅多页面利用配置
  • ✅申请路由动静增加
  • ✅网络申请封装
  • ✅网络异样重连
  • ✅配置全局 less
  • ✅开启剖析打包日志
  • ✅打包进度
  • ✅全局组件通信
  • ✅注入全局变量
  • ✅打包 CDN 替换 NPM 包
  • ✅拷贝文件
  • ✅增加可选链运算符
  • ✅抽离反复文件合并
  • ✅配置 px 转换 rem
  • ✅动静批改主题
  • ✅主动上传服务器
  • ✅Nginx 配置
  • ✅全局事件通信

残缺配置

Vue-cli5 罕用配置开发模板

开启文件 Gzip 压缩

config.plugin('CompressionPlugin')
    .use('compression-webpack-plugin', [{filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240, // 只解决比这个值大的资源。按字节计算
        minRatio: 0.8 // 只有压缩率比这个值小的资源才会被解决
    }])

编译去掉正文

config.optimization.minimizer[TerserPluginIndex] = new TerserPlugin({
    terserOptions: {
        warnings: false,
        format: {comments: false,},
        compress: {
            drop_debugger: true, // 正文 console
            drop_console: true,
            pure_funcs: ['console.log'], // 移除 console
        },
    },
    extractComments: false, // 是否将正文提取到一个独自的文件中
    parallel: true, // 是否并⾏打包
});

开发服务配置

module.exports = {
    devServer: {
        open: false, // 主动启动浏览器
        host: "0.0.0.0",
        port: 9007, // 端口号
        proxy: {
            "/api": {
                target: "https://www.api.com", // 指标代理接口地址
                pathRewrite: {"^/api": "/"}
            }
        },
        hot: true,// 热更新
        headers: {'Access-Control-Allow-Origin': '*', // 微前端利用调试},
    }
}

编辑器别名设置

搁置在根目录下，文件名为jsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
        "baseUrl": "./",
        "moduleResolution": "node",
        "paths": {
            "@/*": ["src/*"],
            "__ROOT__/*": ["*"]
        },
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ]
    }
}

配置环境变量

搁置在根目录下，.env.development、.env.production、.env.test，等等模式文件

命令切换

vue-cli-service build --mode development
vue-cli-service build --mode production
vue-cli-service build --mode test

配置环境文件

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 疏忽
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 疏忽

多页面利用配置

module.exports = {
    pages: {
        index: {
            // page 的入口
            entry: 'src/index/main.js',
            // 模板起源
            template: 'public/index.html',
            // 在 dist/index.html 的输入
            filename: 'index.html',
            // 当应用 title 选项时，// template 中的 title 标签须要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在这个页面中蕴含的块，默认状况下会蕴含
            // 提取进去的通用 chunk 和 vendor chunk。chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当应用只有入口的字符串格局时，// 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。// 输入文件名会被推导为 `subpage.html`。subpage: 'src/subpage/main.js'
    }
}

网络申请封装

文件搁置http/request.js

  • 基于 axios 封装
  • 网络申请拦击
  • 网络响应拦挡
  • 封装罕用 post、get、upload、download、并发申请
const http = axios.create({
    timeout: 1000 * 60,
    withCredentials: true, // 示意跨域申请时是否须要  应用凭证
    headers: {"Content-Type": "application/json",}
});

网络异样重连

基于 axios 产生异样重连

config.reconnectCount = config.reconnectCount || 1;
if (config.reconnectCount >= 3) { // 查看重试次数是否达到最大值
    return Promise.reject(error)
}
const backoff = new Promise(function (resolve) {  // 创立新的 Promise 来解决
    setTimeout(function () {resolve()
    }, 2000)
})
config.reconnectCount += 1  // 减少重试次数
return backoff.then(function () {  // 返回 promise，其中调用 axios 来重试申请
    return http(config)
})

配置全局 less

module.exports = {
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    javascriptEnabled: true,
                    modifyVars: {}, // 这里也阔以申明 less 变量},
                additionalData: ` @import "~@/assets/css/variables.less";`,
            },
        }
    },
}

开启剖析打包日志

npm i webpack-bundle-analyzer -D
const WebpackBundleanAlyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
plugins.push(new WebpackBundleanAlyzer({analyzerPort: 9601}))

打包进度

npm i webpackbar -D
const WebpackBar = require('webpackbar');
plugins.push(new WebpackBar({name: 'PC', color: '#07c160'}))

全局组件通信

npm i mitt -S
import mitt from 'mitt'

app.provide('$mitt', mitt())

注入全局变量

new webpack.DefinePlugin({
    __APP__: JSON.stringify({lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
    })
})
// 在 Vue 单页面中
console.log(lastBuildTime) // 2023-02-23 20:22:48

打包 CDN 替换 NPM 包

应用 vue inspect –plugins 查看 html 是否在后果数组中

// 见多页面利用
Object.keys(pages).forEach(key => {config.plugin(`html-${key}`).tap(args => {args[0].cdn = isBuild ? cdn.build : cdn.dev;
        return args;
    });
})
// 单页面利用
config.plugin(`html`).tap(args => {args[0].cdn = isBuild ? cdn.build : cdn.dev;
    return args;
});
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-cli5 模板 </title>
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"/>
    <% } %>
</head>
<body>
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>

拷贝文件

npm i copy-webpack-plugin -D
const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins.push(new CopyWebpackPlugin({
    patterns: [{from: resolve('./README.md'), to: resolve('./dist')}
    ],
    options: {concurrency: 100}, // 并发数
}))

增加可选链运算符

npm i @babel/plugin-proposal-optional-chaining -D
module.exports = {
    presets: ['@vue/cli-plugin-babel/preset'],
    plugins: ["@babel/plugin-proposal-optional-chaining" // 增加该插件]
}

抽离反复文件合并

config.optimization.splitChunks({
    cacheGroups: {
        styles: {
            name: 'styles',
            test: /\.(s?css|less|sass)$/,
            chunks: 'all',
            priority: 10
        },
        common: {
            name: 'chunk-common',
            chunks: 'all',
            minChunks: 2, // 拆分前必须共享模块的最小 chunks 数。maxInitialRequests: 5, // 打包后的入口文件加载时，还能同时加载 js 文件的数量（包含入口文件）minSize: 0, // 生成 chunk 的最小体积
            priority: 1, // 优化将优先思考具备更高 priority（优先级）的缓存组
            reuseExistingChunk: true // 如果以后 chunk 蕴含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
        },
        vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'all',
            priority: 2,
            reuseExistingChunk: true
        },
    }
})

配置 px 转换 rem

npm i postcss-pxtorem -D
npm i lib-flexible -S

在入口文件引入

import 'lib-flexible/flexible'

在根目录新建 .postcssrc.js 文件

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 37.5, // 换算基数，unitPrecision: 3, // 容许 REM 单位增长到的十进制数字, 小数点后保留的位数。propList: ['*'],
            exclude: /(node_module)/,  // 默认 false，能够（reg）利用正则表达式排除某些文件夹的办法，例如 /(node_module)/。如果想把前端 UI 框架内的 px 也转换成 rem，请把此属性设为默认值
            selectorBlackList: ['.van'], // 要疏忽并保留为 px 的选择器，本我的项目我是用的 vant ui 框架，所以疏忽他
            mediaQuery: false,  //（布尔值）容许在媒体查问中转换 px。minPixelValue: 1 // 设置要替换的最小像素值
        }
    }
}

动静批改主题


<template>
    <a-config-provider>
        <router-view></router-view>
    </a-config-provider>
</template>
<script setup>
import {ConfigProvider} from 'ant-design-vue';

ConfigProvider.config({
    theme: {primaryColor: '#25b864',},
});
</script>

主动上传服务器

执行命令

npm run upload

配置本人的服务器账号和明码

const gulp = require("gulp")
const ftp = require("gulp-ftp");

// 服务器配置信息
const serverSeting = {
    host: "服务器域名",
    port: 21, // 虚拟主机默认 21，服务器默认 22
    user: "用户名",
    pass: "明码",
    remotePath: "/dist/"
};

// 把打包好的文件上传到服务器
gulp.task("server", () => {
    // 近程目录
    return gulp.src("/home/usr/www/**/*").pipe(ftp(serverSeting));
});

gulp.task('upload', gulp.series('server'))

Nginx 配置

nginx 罕用的操作命令

# 批改配置 reload 后看服务启动是否失常
nginx -t;
#重载 nginx
nginx reload
#启动 nginx
start nginx      
#重启 nginx 
nginx -s reload   
#疾速进行 nginx
nginx -s stop     
#残缺有序地进行 nginx
nginx -s quit

这里列举一份比拟罕用的 nginx 配置，具体的理论，须要看具体

server {
    listen       9999; # 监听端口
    server_name  localhost; # 域名能够有多个，用空格隔开
    
    location / {
      root   C:\ 工作 \project\client_admin_system\dist;     #站点根目录，即网页文件寄存的根目录, 默认主页目录在 nginx 装置目录的 html 子目录。index  index.html index.htm;    #目录内的默认关上文件, 如果没有匹配到 index.html, 则搜寻 index.htm, 顺次类推
    }
    
    # 反向代理
    location /api {rewrite  ^.+api/?(.*)$ /$1 break;
        proxy_pass  http://192.168.1.100:7001;    #node api server 即须要代理的 IP 地址
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    #error_page  404              /404.html;    #对谬误页面 404.html 做了定向配置
    
    # redirect server error pages to the static page /50x.html
    #将服务器谬误页面重定向到动态页面 /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {root   html;}
}

UI 组件

Ant-Design-Vue

批改 css 变量

document.documentElement.style.setProperty('--primary-color', 'red');

如果应用 Vue-cli3 搭建的我的项目请看
一份残缺的 Vue-cli3 我的项目根底配置项

如果应用 Vite 搭建的我的项目请看
一份残缺的 Vite3 我的项目根底配置项

退出移动版