vue3+typescript+pinia+阿里云搭建部署前端应用【完整版】

开启AdminJS成长之旅！这是我参与「AdminJS日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

本文采用新版主流vue3框架，新一代状态管理工具pinia，下一代前端开发与构建工具vite，JavaScript类型的超集TypeScript，以及阿里云轻量服务器，众多新技术结合搭建部署前端应用。

初步工程搭建

初始化项目

使用vite进行初始化，在项目文件夹执行如下命令：

npm create vite@latest

在交互过程中，framework选择Vue，variant选择TypeScript。

安装依赖

根据提示进入项目，执行下列命令

cd 项目名
npm install

此时会发现项目中出现一个node_modules文件夹，表示依赖包已安装成功

启动项目

打开package.json发现在scripts下面，已经自动生成了dev、build等命令，此时执行dev命令，启动项目

npm run dev

此时终端会出现如下输出，表示项目已经启动

访问应用

直接浏览器打开http://localhost:5173/ 就能访问应用，此时一个最基本版应用已经完成。

搭建前端路由

安装路由包

安装最新vue-router路由包，执行如下代码

npm install vue-router

新建路由

新建src/router/index.ts文件，编写路由配置

// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
  ...
  {
    path: '/home',
    name: 'Home',
    component: () => import('../pages/home/index.vue')
  }
]
const router = createRouter({
  history: createWebHistory('/water/'),
  routes
})

本文采用的是HTML5路由模式，并且配置根路径为water，当然读者也可用Hash模式。在 Vue Router API 从 v3（Vue2）到 v4（Vue3）的重写过程中，大部分的API都没有变化，但配置路由这里变了，具体可点击这里。

新建路由对应的页面home/index.vue

<!-- src/page/home/index.vue -->
<template>
  <div>home page</div>
</template>

注册路由

在src/main.ts中注册路由信息，使路由生效

// src/router/index.ts
import router from './router/index'
...
app.use(router)
...

测试路由页面

直接访问home页面链接http://localhost:5173/water/home

没有问题，路由正确访问到了文件，并展示出页面！

接入状态管理

安装状态管理库

安装vue的专属状态管理库pinia，执行如下命令

npm install pinia

定义状态管理

新建store/index.ts文件，编写定义代码

// src/store/index.ts
import { createPinia } from 'pinia'

const store = createPinia()

export default store

然后在main.ts中注册store，新增如下代码

// src/main.ts
...
import store from './store'

app.use(store)
...

使用状态管理

新建store/info.ts，用于用户相关信息的store，代码如下

// src/store/info.ts
import { defineStore } from 'pinia'

export const useInfoStore = defineStore({
  id: 'info',
  state: () => ({ // 定义name
    name: 'John Doe'
  }),
  actions: {
    setName(name: string) { // 修改name
      this.name = name
    }
  }
})

采用组合式API（Composition API）修改home/index.vue，使用store，代码如下

<!-- src/pages/home/index.vue -->
<template>
  <div>{{ info.name }}</div>
</template>
<script lang="ts" setup>
import { useInfoStore } from '../../store/info'
const info = useInfoStore()
</script>

访问home页面，发现store中定义的name展示出来了！

接口请求封装

安装请求包

使用axios进行接口请求处理，nprogress处理请求进度条

npm install axios nprogress
npm install @types/nprogress -D

统一封装请求

新建service/index.ts对接口请求的request、response进行统一处理，封装请求的get和post方法，代码如下

// src/service/index.ts
import axios, { AxiosRequestConfig } from 'axios';
import NProgress from 'nprogress'

class RequestHttp {
  constructor() {
    this.initInterceptors();
  }

  initInterceptors() {
    axios.interceptors.request.use((config: AxiosRequestConfig) => {
      NProgress.start();
      return config;
    }, (error) => {
      NProgress.done();
      return Promise.reject(error);
    });

    axios.interceptors.response.use((response) => {
      NProgress.done();
      return response;
    }, (error) => {
      NProgress.done();
      return Promise.reject(error);
    });
  }

  get(url: string, config?: AxiosRequestConfig) {
    return axios.get(url, config);
  }

  post(url: string, data?: any, config?: AxiosRequestConfig) {
    return axios.post(url, data, config);
  }
}

export default new RequestHttp();

验证请求

新建manage/index.ts文件，编写请求用户信息方法（接口服务，文末有说明)

// src/api/manage/index.ts
import axios from '@/service'

export const useList = () => {
  return axios.get('/api/users')
}

修改vite.config.ts配置文件，增加接口请求代理

...
export default defineConfig({
  ...
  server: {
    proxy: {
      '/api': {
        target: 'http://服务器ip:端口',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})

类似home页面，新建manage路由，并编写页面代码

<!-- src/pages/manage/index.vue -->
<template>
  <div class="manage">
    <span class="manage-title">用户列表</span>
    <table>
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>邮箱</td>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
      </tr>
    </table>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, Ref } from 'vue'
import { useList } from '@/api/manage'
import { Users } from '@/api/manage/types'

const list: Ref<Users[]> = ref([])
onMounted(async () => {
  const res = await useList()
  list.value = res.data
})
</script>

访问页面，查看结果，发现接口数据请求到了！

其他配置

css预处理器

由于vite提供了对.less、.scss文件的内置支持，因此可安装相应的预处理器依赖使用，例如安装less

npm install less -D

在manages/index.vue中使用

<!-- src/pages/manage/index.vue -->
...
<style lang="less" scoped>
  .manage {
    &-title {
      font-size: 24px;
      color: #000;
    }
  }
</style>

引用别名alias

在配置文件vite.config.ts中新增alias配置

import { resolve } from 'path'
export default defineConfig({
  ...
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
    extensions: ['.js', '.ts', '.vue']
  }
  ...
})

同时在tsconfig.json中新增如下配置

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
    }
    ...
  },
  ...
}

此时可以修改引用src下的路径，例如home/index.vue

// 修改前
import { useInfoStore } from '../../store/info'
// 修改后
import { useInfoStore } from '@/store/info'

更多配置，读者可以按需添加。

构建部署

打包工程

查看package.json中的构建命令

"scripts": {
  ...
  "build": "vue-tsc && vite build",
  ...
},

直接执行如下命令打包

npm run build

打包完后，发现项目中有个dist文件，包含打包后的项目内容

部署到服务器

上传打包后的dist文件，本文是部署在阿里云轻量服务器/data/wwwroot/water_fe文件下，执行如下scp命令

scp -r dist 用户名@服务器ip:/data/wwwroot/water_fe

修改服务器上ngnix配置，登录服务器后，使用cd命令进入文件夹，vim修改文件

cd /usr/local/nginx/conf/vhost
vim water.conf

由于本文使用的是HTML5路由模式，需要在服务器上添加一个回退路由，新增如下配置

service {
  ...
  root /data/wwwroot/water_fe/dist;
  location /water {
    try_files $uri $uri/ /index.html;
    add_header Cache-Control no-cache;
  }
  ...
}

重启nginx，使新添加的配置文件生效

/usr/local/nginx/sbin/nginx -s reload

访问项目

通过服务器ip访问项目，页面呈现出来了，没问题！

写在最后

本篇写到这里就结束了，欢迎点赞+关注+评论支持下，如果文中有错误或你有更好的见解，可以讨论交流~

本文使用接口服务来源这篇文章 《最新版koa+typescript+mysql+pm2搭建部署服务》