非你网

项目打包，如果访问位置非对应根目录，是需要配置的。打包输出目录也是需要配置的（默认是 dist目录），chunk 也需要配置。

pnpm lint 执行检查的时候，应该对打包的文件忽略检查。这个也需要配置的。现在一个一个的来。

配置打包

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  base: '/admin/',
  build: {
    outDir: 'admin',
    emptyOutDir: true,
    chunkSizeWarningLimit: 3000,
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].[hash].js', // 入口文件名
        chunkFileNames: 'assets/[name].[hash].js', // chunk 文件名
        assetFileNames: 'assets/[name].[hash].[ext]', // 静态资源文件名
      },
    },
  },
  plugins: [vue(), vueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

这里输出目录是 admin，基础路径也是 admin。 配置的警官文件大小，设置了打包输出的文件名等。

执行打包 pnpm build，会将项目打包到 admin 目录下。

但是，当执行 pnpm lint 检查的时候，会对 admin 目录下的代码进行检查。这个是不需要检查的。所以需要配置 eslint.confg.ts 来控制该行为。

配置 eslint.confg.ts 来忽略检查

import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import pluginOxlint from 'eslint-plugin-oxlint'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  ...pluginOxlint.configs['flat/recommended'],
  skipFormatting,
  {
    name: 'app/rules',
    rules: {
      'vue/multi-word-component-names': 'off',
    },
  },
  {
    name: 'app/ignore',
    ignores: ['admin/**'],
  },
)

这个追加了以下配置。

  {
    name: 'app/ignore',
    ignores: ['admin/**'],
  },

最后，编辑 .gitignore 文件， 对 git 进行配置。让 git 忽略对 admin 目录里的文件进行版本控制。

初始化项目时，在根目录会有一个 .vscode 目录。

里边有一个 extensions.json 文件，配置了推荐的 vscode 插件。

里边有一个 settings.json 文件，配置了 vscode 一些行为控制。比如保存时，自动格式化，使用什么插件格式化等。可以单独设置 vue，json，css 等文件的格式化插件。如下：

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "tsconfig.json": "tsconfig.*.json, env.d.ts",
    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
}

该配置文件不进行版本控制。可以增加一个 settings.json.example 来进行版本控制。

手动格式化和检查

# 手动格式
pnpm format

# 手动检查
pnpm lint

https://cn.vite.dev/guide/env-and-mode

在本地运行和打包使用不同的配置的时候，环境变量的配置就很有作用。比如本地运行调用接口用的域名是 https://test.xxx.com,正式上线调用的接口是 https://www.xxx.com。

先创建智能提示

编辑 env.d.ts 文件，内容如下。

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

创建 env 文件

项目根目录添加 .env 文件。添加以下内容。

VITE_API_BASE_URL=https://test.xxx.com

项目根目录添加 .env.production 文件。添加以下内容。

VITE_API_BASE_URL=https://www.xxx.com

修改 ./src/home/index.vue 文件，测试

<template>
  <div>
    <h1>HI, {{ user.name }} , Welcome to the Home Page</h1>
    <h2>Email: {{ user.email }}</h2>
    <h2>Api: {{ api }}</h2>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const user = ref<User>({
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com',
  createdAt: new Date(),
})

const api = ref(import.meta.env.VITE_API_BASE_URL)

</script>

<style scoped>
h1 {
  color: #42b983;
  font-size: 2em;
}
</style>

测试环境

pnpm dev

生产环境

pnpm dev --mode production

结果如图：

定义基本类型

新建 ./src/types 目录，在目录下新建 global.d.ts，添加以下内容。

declare interface User {
  id: number
  name: string
  email: string
  createdAt: Date
}

修改 ./src/home/index.vue。

<template>
  <div>
    <h1>HI, {{ user.name }} , Welcome to the Home Page</h1>
    <h2>Email: {{ user.email }}</h2>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const user = ref<User>({
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com',
  createdAt: new Date(),
})
</script>

运行查看 pnpm dev

docker 中运行 mysql 8.2，默认情况下，会占用 400M 左右的内存。运行两个就双倍。对于那种便宜的阿里云1核1G或2G的服务器，很容器就卡死。这个时候，就需要设置设置，降低 mysql 的内存消耗了。
其实，一个 mysql 占用 400M 内存，为什么要在一台服务器上装那么多呢。可以对 mysql 进行单独编排，然后通过同一网络的方式，让其他容器也都能访问这个 mysql 就可以了。出现前边那种局面往往是一个完整的项目会有 mysql，redis，php，python，java 等环境构成，而这些构成又放在一个 compose.yaml 中进行编排。那么多个项目后，就会出现多个重复的进程了。虽然对于磁盘空间不会多份重复，内存是在重复增长的。这个时候，设计项目组合的时候就需要考虑考虑。所以想单独剥离 mysql 出来。

可以使用 htop 命令来查看服务器的 cpu，内存使用情况。

可以使用 docker stats 来查看容器使用 cpu, 内存的情况。

优化使用 mysql 内存

新建 my.cnf 文件 ，位置是这样的 ./conf/mysql/my.cnf 。填充下边的代码。

[mysqld]
performance_schema_max_table_instances=400
# 缓存
table_definition_cache=400
# 用于监控MySQL server 在一个较低级别的运行过程中的资源消耗、资源东西
performance_schema=off
# 打开表的缓存
table_open_cache=64
# InnoDB缓冲池大小调整操作的块大小
innodb_buffer_pool_chunk_size=64M
# InnoDB 存储引擎的表数据和索引数据的最大内存缓冲区大小
innodb_buffer_pool_size=64M

在 compose.yaml 中，增加 volume，配置如下。

  mysql: 
    ……
    volumes:
        ……
      - ./conf/mysql/my.cnf:/etc/mysql/conf.d/my.cnf
    ports:
      - 3306:3306

然后重启 myslq。

docker-compose restart mysql

然后查看内存使用情况进行对比。

多个项目公用一个 mysql

可以给 mysql 进行单独编排，设置好网络。可以将该网络设置为主网络，其他容器可以通过 external 的方式公用同一个网络。这样各个容器间就方便通信了。

目录结构

https://juejin.cn/post/7103828900999856141

状态管理

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/frameworks/nuxt-3.html

https://nuxt.com.cn/modules/pinia

中间件

https://juejin.cn/post/7202049817206915109

路由

https://nuxt.com.cn/docs/getting-started/routing

全局路由守卫

tauri 时间相关的处理。一般，找 tauri 的 api，就是找 rust 的。tauri 获取当前时间，获取时间戳。

https://docs.rs/chrono/0.4.26/chrono/#date-and-time

https://www.cnblogs.com/yjmyzz/p/event-with-tauri.html

获取当前年月日时分秒

use chrono::{DateTime, Local};

fn now_datetime() -> String {
  let datetime: DateTime<Local> = Local::now();
  let timestamp_str = datetime.format("%Y-%m-%d %H:%M:%S.%f").to_string();
  timestamp_str
}

需要在 Cargo.toml 中，加入以下配置。

[dependencies]
…
chrono = "0.4"

工作和学习中，多显示器同时工作的情况是常态。那么在多个显示器之间来回切换应用是个很有效率的操作。 win 系统，默认就有这样的快捷键。mac，默认没有，得自己设置一下。 ### 操作

https://zhuanlan.zhihu.com/p/657556266

https://support.apple.com/zh-cn/HT201236

按照上边这个文章讲的来就可以搞定了。记得填入的文字一定不能错。 我的设定是这样子的。

# 移动到视网膜显示器（macbook pro 我放在左边） 
⇧ + ⌥ + ← 
# 移动到外接显示器（外接显示器，我放在右边） 
⇧ + ⌥ + →
# 全屏和退出全屏 
⌃ + ⌘ + f 

好，就这三个快捷键。

还是不够好啊。全屏状态下，快捷键失效是什么鬼。

最后

• 在多个显示器间移动应用程序，win 的体验比 mac 好太多了。
• 在单个显示器间切换桌面， mac 又比 win 好。

就这么明显的体验，官方咋就做不好呢。

https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource

https://juejin.cn/post/7206261082452721722

https://juejin.cn/post/7036313010142609421

laravel 使用 EventSource

为什么当今Web应用不都采用WebSocket形式进行数据交互？

之前，写到小程序扫码授权登录后台的功能。在这个场景下，EventSource 真的比较有用。这个对比轮询和 websocket，在当前场景下，的确是有优势的哈。

返回数据这块已经处理了。现在对跨域进行处理。

# 默认跨域
r.Response.CORSDefault()

允许所有跨域是不安全的。所以得对允许的域名进行跨域，或干脆不跨域。跨域中间件完善。

func (s *sMiddleware) CORS(r *ghttp.Request) {
    corsOptions := r.Response.DefaultCORSOptions()
    corsOptions.AllowDomain = []string{"localhost:5173"}
    corsOptions.AllowOrigin = "http://localhost:5173"
    corsOptions.AllowCredentials = "false"
    corsOptions.AllowMethods = "POST,GET,OPTIONS,PUT,PATCH,DELETE"
    corsOptions.AllowHeaders = "Accept,Content-Type,Referer,User-Agent,Origin,X-Requested-With,X-XSRF-TOKEN,X-CSRF-TOKEN,Authorization,Time"
    r.Response.CORS(corsOptions)

    r.Middleware.Next()
}

这样就够了，主要设置的是允许跨的域，允许跨的请求方式，允许 header 中携带的值以及是否使用 Credentials。主要就这几个的定义。

继续阅读