新项目笔记 Vue3 + Vite

---

起因

跟（小萍萍）摸鱼，想着做个小应用

---

需求分析

version 0.2

• 登录注册
• 添加好友信息，相识日期

version 0.1

• 主页展示相识的天数和秒数

---

框架

• 前端 Vue3 + Vite
• 后端：Node 的 Koa 框架
• 数据库：mySQL

git 仓库地址

---

遇到的问题

CreateRouter 报错

// 报错
does not provide an export named 'createRouter'

如果是用 npm i vue-router 安装的话会默认安装的是 vue-router@3.x ，然而我们要安装4.x，4.x 下才有 createRouter

重新安装 npm i --save vue-router@next，之后重启项目就可以了

不热更新

原因：组件名大写了，第一个dev 的时候能看到改变，但是不会热更新了

根本原因：粗心大意了。

跨域

问题描述：后端配置完接口以后，出现跨域的问题

解决：需要在前端的 vite 的配置项目中添加 proxy，官方手册：proxy

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:9000',	// 添加后端的地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api')
      }
    }
  }
})

Cookie 前端获取不到

后端在设置的Cookie时候要设置

httpOnly:false,     // 这里之前没有加

Cookie 不能存汉字

Cookie 是不能存成汉字的，需要对值进行加解密的处理，base64 ，下图是我尝试存成汉字后的报错

解决办法：base64 加密

const b64Encode = (str) => {
    // 加密
    // 把中文先转化 ASCII 字符序列 ，然后进行base64编码
    return btoa(encodeURIComponent(str))
}
const b64Decode = (str) => {
    // 解密
    // 拿到base64 字符串后先进行转化成 asc2，然后转化成中文
    return decodeURIComponent(atob(str))
}

参考文章：https://www.cnblogs.com/lxg0/p/7543991.html

---

项目操作

初始化仓库

再 git 上新建一个空白仓库，然后本地 clone 下来

根据 vite 官网上的描述，新建一个前端的项目

引入路由

/router/index.js 新建一个路由页面的写法

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
const routes = [
    {
        path: '/',
        name: 'HelloWorld',
        // component: () => import('../components/HelloWorld.vue'),
        component: HelloWorld
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

注意，这里不能用 module.export 导出，这样会报错的

导出的测试如下，这个是正常的

这个是报错的

然后再 main.js 中引入。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App);
app.use(router)
app.mount('#app')

引入Element-plus

在 npm i element-puls 后，在main.js 中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App);
app.use(router)
app.use(ElementPlus)

app.mount('#app')

nginx 配置服务到 80 端口

我是看了这个教程啊：1、nginx 的教程
首先把 nginx 下载下来，然后解压缩包，然后找到这个路径 nginx-1.20.1\conf， 修改路径下 nginx.conf 这个文件。至于修改的文件都是什么功能，视频教程里有讲解。主要是说明访问路径，接口，以及proxy 代理的地址。

配置好之后，启动 / 重新加载 nginx 启动服务

然后到访问到 localhost ，成功访问

内网穿透

需求：我需要别人来访分我起的服务

遇到了这个问题：本地启动服务，连接在同一个局域网上的设备是可以正常访问的，但是外网是无法访问的，主要是因为自己的服务只是在局域网里有效的。我们需要内网穿透

1、nat、内网穿透，端口映射概念
2、内网穿透教程

步骤

• 下载一个软件 natapp ，用来内网穿透的，然后注册个用户，使用免费的即可
• 然后购买一个免费的隧道，写好本地启动的服务端口，
• 在natapp.exe 这个文件的同级下新建 config.ini文件 ，内容如官网描述，
• 然后填写你的 authtoken 到当前文件夹下
• 最后运行netapp.exe内网穿透软件

数据库尝试

一定要先建立好数据库和表结构
如果没有建立数据库的话，node会报错如下信息：

如果没有表的话会报错如下信息

如果字段都有了，就可以正常操作了