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 ornpm 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 developmentvue-cli-service build --mode productionvue-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 -Dconst WebpackBundleanAlyzer = require('webpack-bundle-analyzer').BundleAnalyzerPluginplugins.push(new WebpackBundleanAlyzer({analyzerPort: 9601}))打包进度
npm i webpackbar -Dconst WebpackBar = require('webpackbar');plugins.push(new WebpackBar({name: 'PC', color: '#07c160'}))全局组件通信
npm i mitt -Simport 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 -Dconst 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 -Dmodule.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 -Dnpm 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;#重载nginxnginx reload#启动 nginxstart nginx #重启 nginx nginx -s reload #疾速进行 nginxnginx -s stop #残缺有序地进行 nginxnginx -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我的项目根底配置项