Vue3.3.4+Vite使用组合式API开发一个简单的博客+打包上线

摘要

本次案例是使用Vue3.3.4的组合式API实现一个简单的博客开发流程和组件使用示例代码，比较简单，主要是通俗易懂，了解组合式API的使用。

创建项目

Windows cmd创建一个Vue3.2项目（使用cnpm国内镜像高速构建）

开发

组件

views/Index.vue 首页组件
components/blogList.vue 博客列表
components/SingleBlog.vue 单条博客
views/blogInfo.vue 单条博客的详情

路由

main.js

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Index from '../views/Index.vue'
import blogInfo from '../views/blogInfo.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path: '/blog/:id',
      name: 'blogInfo',
      component: blogInfo
    }
  ]
})

export default router

组件代码

views/Index.vue

components/blogList.vue

components/SingleBlog.vue

views/blogInfo.vue

App.vue
这个组件直接使用路由容器即可，因为在路由配置中已经将所有组件渲染到，即根据路由来决定渲染的组件，然后将这个组件渲染到

效果

打包

打包在根目录，无需配置。
打包后，准备部署在生产环境的二级目录，需要在vite.config.js配置二级目录路径。

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

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

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/vue3-vite-bulid-blog/' : '/',
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  }
})

其中base: process.env.NODE_ENV === 'production' ? '/vue3-vite-bulid-blog/' : '/',这个配置，如果没有，你需要增加。/vue3-vite-bulid-blog/是你的服务器的二级目录名。

打包命令
我目前所在的开发环境是Windows，在项目目录进入cmd，执行：