目录
6.1 五个超强图片处理网站,使用简单,人工智能老照片修复,背景移除,在线抠图,图片压缩!
前言:webpack 打包看这里
(移动端打包)一步一步,一步 从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)_0.活在风浪里的博客-CSDN博客_移动端打包成app一步一步,一步 从代码到,打包成为手机App,上传至ngnix服务器 (Vue项目)https://blog.csdn.net/m0_57904695/article/details/122500485?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165940900116782184626956%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165940900116782184626956&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-122500485-null-null.nonecase&utm_term=%E6%89%93%E5%8C%85&spm=1018.2226.3001.4450手写一个服务器代码将 《vue电商后台管理系统》部署上去 上线、打包_0.活在风浪里的博客-CSDN博客亲测可用,一定会收获颇多,1.上线vue电商后台管理项目2.手写搭建服务器并挂载 (node)3.打包优化 完成上线
https://blog.csdn.net/m0_57904695/article/details/122977868?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165940900116782184626956%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165940900116782184626956&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-3-122977868-null-null.nonecase&utm_term=%E6%89%93%E5%8C%85&spm=1018.2226.3001.4450
哎,真慢,你知道我在说啥,开发中启动一下项目抽根烟回来就启动开了,常规操作基操勿六
目前尤大大强烈推荐的vite,如何?一个字,真的好快!念及此,解释打包配置,不在说官方文字
此博文将以一种几近聊天的方式来学会打包,第一次打包的小伙伴也可以一遍懂一遍成,不多说,开始了
番外
使用vite 将我的 单文件index.html打包
首先,在项目根目录下创建一个名为 index.html
的文件,并在其中编写你的 HTML 代码。然后,使用以下命令安装 vite
:
npm install vite --save-dev
安装完成后,在 package.json
文件中添加以下脚本命令:
{
"scripts": {
"dev": "vite --open --port 3009",
"build": "vite build"
},
"devDependencies": {
"vite": "^4.3.9"
}
}
接下来,在终端中执行以下命令启动开发服务器:
npm run dev
开发服务器启动成功后,你可以在浏览器中访问 http://localhost:3009/index.html
来查看你的网页。
当你完成了网页的开发并想要打包发布时,执行以下命令生成打包文件:
npm run build
打包文件会生成在项目根目录下的 dist
文件夹中,其中包括打包后的 index.html
文件和其他需要的文件。
基于此,您已经完成最简单的使用过程,念及此下面配置 VUE3 + TS + VITE
一:vite构建项目 配置base
好了,在以上你构建了vite,并配置了最简单的操作后,你准备配置vite.confing.ts
开发环境下我们的图片位置在/src,ok,本地没问题正常显示,你打了个包 (npm run build),然后又运行了npm脚本preview,
也没问题,但是在一些服务器上,使用绝对目录会导致404,所以我们需要配置为相对目录
二:路径别名
- 先引入path,在配置, 注意一定不要随意命名,a b c这样的,项目的目录也不能为关键字保留字!!
import { resolve } from "path";
resolve: {
alias: {
"@": resolve(__dirname, "src"),
// 注意一定不要随意命名,a b c这样的,项目的目录也不能为关键字保留字!!
"comp": resolve(__dirname, "src/components"),
// 配置图片要这样引用
"/img": "./src/assets",
},
},
三:生产环境移除log + 跨域
build: {
minify: "terser",
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
drop_debugger: true,
},
},
},
vite.config.ts 完整代码:
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import vue from "@vitejs/plugin-vue";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import path from "path";
export default defineConfig({
plugins: [
vue(),
//引入vue 插件
AutoImport({
imports: ["vue"],
dts: "src/auto-import.d.ts",
}),
//plus按需引入
AutoImport({
resolvers: [ElementPlusResolver()],
}),
//plus按需引入
Components({
resolvers: [ElementPlusResolver()],
}),
],
build: {
minify: "terser",
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
drop_debugger: true,
},
},
},
resolve: {
//配置根路径别名: import('@/pages/login/login.vue')
alias: {
"@": path.resolve(__dirname, "src"),
// 注意一定不要随意命名,a b c这样的,项目的目录也不能为关键字保留字!!
"comp": resolve(__dirname, "src/components"),
// 配置图片要这样引用
"/img": "./src/assets",
},
},
// 跨域
server: {
//使用IP能访问
host: "0.0.0.0",
// 热更新
hmr: true,
//设为 true 时若端口已被占用则会直接退出,而不是尝试下一个可用端口
strictPort: false,
//自定义代理规则
proxy: {
// 选项写法
"/api": {
target: "https://admin.itrustnow.com",
// target: "http://192.168.0.50:8083",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
四:引入element-plus组件库 cdn
官网建议使用按需引入,但是它在解析使用到的组件时也很慢,所以建议使用cdn
安装命令
cnpm i vite-plugin-cdn-import --save-dev
引入到vite.config.ts
import importToCDN, { autoComplete } from "vite-plugin-cdn-import";
使用在插件中
plugins: [
vue(), //vue
AutoImport({
//自动引入vue组件 插件
imports: ["vue"],
dts: "src/auto-import.d.ts",
}),
//plus按需引入
// AutoImport({
// resolvers: [ElementPlusResolver()],
// }),
// Components({
// resolvers: [ElementPlusResolver()],
// }),
importToCDN({
modules: [
{
name: "vue",
var: "Vue",
path: "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js",
},
{
name: "vuex",
var: "Vuex",
path: "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.2/vuex.global.prod.min.js",
},
{
name: "vue-router",
var: "VueRouter",
path: "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.12/vue-router.global.prod.min.js",
},
{
// 引入cdn element-plus
name: "element-plus",
var: "ElementPlus",
path: "https://unpkg.com/element-plus",
css: "https://unpkg.com/element-plus/dist/index.css",
},
],
}),
],
下载element-plus
vite-plugin-cdn-import
这个插件是专门打包发布阶段使用的,开发阶段并没有什么用,所以开发阶段我们该怎么引入npm包就怎么引入,该在项目中怎么使用vuex、vue-router就怎么使用就好了- 需要注意的是,开发环境使用本地的npm包,cdn是打包时候才生效的。
一种简单的方法,就是你全局引入,注释掉plus 的css文件,因为cdn已经引入了,npm run build然后再去看dist/index.html
,里面已经引入了cdn链接,并且vue
、vuex
、vue-router、plus
这些库没有被打包进你的本地包中。
yarn add element-plus
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
//import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
五:代码压缩
安装
cnpm i vite-plugin-compression -D
引入
import viteCompression from "vite-plugin-compression";
使用
plugins: [
viteCompression(),
],
nginx服务端需要配置
没错,这里nginx
也要配置, 配置启动gzip
模块, 然后优先使用本地压缩好的文件。
前端配置gzip压缩
为啥要客户端生成呢? 问得好, 我们知道服务端生成是不是每一次请求都要去请求服务器,然后服务器来生成压缩包。服务器每一次生成压缩包是不是会不会浪费服务端的性能哇!, 如果客户端生成,服务端先判断是否存在的后缀名为zip的文件,直接去拿,不存在在来压缩,这样是不是把服务器每一次都要压缩的事情,交给客户端了呢? 虽然客户端打包进行代码压缩会很慢。 但是我们打包只是发布代码的时候打一次包,而服务器是要面对成千上万的人来访问等。 说到这里大家应该明白了吧。
六:图片压缩
没压缩前效果:
用ps打开 shift + alt + ctrl + s 保存
压缩后大小
6.1 五个超强图片处理网站,使用简单,人工智能老照片修复,背景移除,在线抠图,图片压缩!
AI人工智能图片放大:https://bigjpg.com/
人工智能老照片无损修复:https://jpghd.com/
超级橡皮擦:https://remover.zmo.ai/
免费在线抠图神器:https://picwish.cn/
老牌在线图片压缩工具:https://tinypng.com/
七:字蛛 字体压缩 字体在vue项目中使用
1. 在根目录下将后缀为ttf的字体包放进去
2. 在根目录index.html中配置字体别名 (别名要和字体包名称一样)
@font-face {
/* 注意重命名字体名称要和字体包名称一样*/
font-family: "Alibaba-PuHuiTi-Regular";
/* 必须使用相对路径 不然字蛛压缩报错 web fond font*/
src: url("./Alibaba-PuHuiTi-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
多个字体,复制多份不用在新建文件 font-family是别名 src是路径
3. 在index.html中创建盒容器包裹要用到的字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vite</title>
<meta name="description" content="xxxx">
<meta name="keywords" content="xxxx">
<style>
@font-face {
font-family: "Alibaba-PuHuiTi-Light";
src: url("./Alibaba-PuHuiTi-Light.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Alibaba-PuHuiTi-Medium";
src: url("./Alibaba-PuHuiTi-Medium.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Alibaba-PuHuiTi-Regular";
/* 必须使用相对路径 不然字蛛压缩报错 web fond font*/
src: url("./Alibaba-PuHuiTi-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/* 跟你要压缩的地方类名需要相同 */
.title {
/* vue是单页面应用所以弊端就是他会显示到你的页面上 */
/* 隐藏了之后,所有的title类名都会隐藏,要在真正显示的地方加上display:block使其显示 */
display: none;
font-family: "Alibaba-PuHuiTi-Regular";
}
</style>
</head>
<body>
<div class="title">
要压缩的字,让优秀成为一种习惯!
</div>
<script type="module" src="/src/main.ts"></script>
<div id="app"></div>
</body>
</html>
下载字蛛,全局安装 压缩爬取字体 (需要先安装node)
cnpm install font-spider -g
安装完毕,检查是否安装成功可以,font-spider -V,查看版本,显示如下说明安装成功
font-spider -V
4. 使用行命令font-spider index.html
font-spider index.html
5. 在页面使用字体
<template>
<div class="title">让优秀成为一种习惯</div>
<div class="content">让优秀成为一种习惯</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.title {
/* 因为项目根目录index.html中设置了相同类名display: none;了,这里要用到所以要 display: block; */
block;
display: block;
}
</style>
6.新加入的字体或者更换其他字体需要重新执行压缩命令 !!!
font-spider index.html
重新启动项目
npm dev
字蛛压缩项目模板点这里 👇资源https://download.csdn.net/download/m0_57904695/86339106
7 五大注意点
1 font-spider主要依据ttf格式的文件来进行分析压缩的,所以font-face的路径必须存在ttf格式的,其他格式不行。设计师的字体大部分都是网上下载的,可以找设计师要字体包的名字,然后通过这个网站字客网去找对应的ttf,下载~
2 引入路径要使用相对路径,
否则会报 Web Font was not found3 font-spider 仅适用于固定文本,如果文字内容为动态可变的,新增的文字将无法显示为特殊字体。解决办法是删除压缩后的,将备份出来的还原,重新压缩。
font-spider xxx.html 如果不添加options,会默认备份原文件。
font-spider会将页面依赖的字体将会自动压缩好,原 .ttf 字体会备份
4 这个报错就是Quarto A没有对应字体包,我查过这个字体是类似于base64那样形式的字体,所以不存在引入文件。
所以如果不想压缩某个字体包的话,就先注释其font-face。5 一旦压缩一次后,再压缩别的是没用的。
比如说,我在一个文件夹里压缩了字体,然后生成了新的字体包,我又在另一个文件夹里压缩字体,这两个文件夹的字体共用一个字体包和font-face,所以再次压缩的就是上一个压缩字体包进行压缩的,所以导致页面中有的字体没有转化过来。
解决办法:一个命令行压缩所有
font-spider file1/*.html file2/*.html file3/*.html
这样即可,*.html代表通配符,分析所有html格式的文件,多个文件就直接在后面加上。
我最大的坑就是这个,没仔细看官方文档,认为只能一次性,浪费了好多时间 wtm
八 : package.json
"scripts": {
"dev": "vite --open",
"test": "vite --mode test",
"prod": "vite --mode production",
"build": "vite build",
"preview": "vite preview --open",
"build:dev": "vite build --mode development",
"build:test": "vite build --mode test",
"build:zhongri": "vite build --mode zhongri",
"build:jg": "vite build --mode jg",
"build:testjg": "vite build --mode testjg",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
},
比如说:后台自动化打包,让你配置不同环境打出不同包,简单来有 jg、testjg、hg三个域名,执行不同命令走不同接口
第一种:
配置package.json,在新建对应的.env文件,运行不同的打包命令则打出不同接口的包,因为封装axios时用的就是import.meta.env.VITE_API_URL,动态获取.env的值
package.json
命令:npm run build
.env.production
package.json
命令:npm run build:jg
.env.jg
package.json
打包命令testjg:npm run build:testjg
.env.testjg
当然了不同项目不同写法,这只是一种,下面是我公司官网的环境配置,但是这样不好配置线上多个同步地址
第二种:
vite.config.ts
配置环境变量,