后端只能写后端？vue + vite环境搭建你也必须要会呀！！

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

作为一个后端人员，对于前端基本的人们技术也是需要了解的，虽然平时也会使用vue2甚至vue3去写代码，但是对于系统性的学习和记录还是较少的，毕竟每次都去百度也是挺麻烦的，接下来将会用一些篇幅去提升下这方面的技能，首先从搭建基础环境开始把。

简介

本篇文章将记录vue3 + vite的搭建过程，后续想要做一些关于three.js的开发工作，但是还有学习过，所以项目名称就叫做threejs了。

什么是vite？

时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。然而，当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

复制代码

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

官网地址

总结来说，vite就是为了改善我们在打包项目时缓慢的效率而提出的，极大的提升了我们的开发体验。

开始搭建

• node 版本

  根据官方建议，node版本需要在12以上，达不到的请自行去官网下载升级：nodejs.org

  扫描二维码关注公众号，回复： 14442639 查看本文章

  PS D:\workspace> node -v
  v16.15.1
  复制代码

• 创建项目

  通常vue我们都是使用如下方式创建：

  create vue appName
  复制代码

  但是还需要手动引入vite，非常麻烦，所以我们可以使用如下的方式：

  npm init vite
  复制代码

  之后会提示你输入项目名称：

  

  输入名称之后会提示选择框架，这里选择vue：

  

  接下来提示是否使用ts，本文将不使用：

  

  接下来就完成了创建，同时给出提示，进入文件加，安装依赖，启动项目：

  

  我们按照上述操作完成后:

  

  直接访问地址：

  

组件安装

使用vue的过程中，需要使用很多的组件，接下来，将会将常用的组件引入方式，记录如下。

路由组件 router

• 安装路由

  npm install vue-router@next --save
  复制代码

• main.js引入router

  import { createApp } from 'vue'
  import './style.css'
  import App from './App.vue'
  import router from './router/index'
  
  createApp(App).use(router).mount('#app')
  复制代码

• 修改App.vue

  <template>
    <router-view />
  </template>
  
  <script>
  
  export default {
    name: 'app'
  }
  </script>
  复制代码

• 创建路由文件

  src目录下创建router文件夹，下面创建index.js文件：

  

  在index.js添加如下配置：

  // createWebHashHistory 是hash模式就是访问链接带有#
  // createWebHistory  是history模式
  import {createRouter, createWebHashHistory} from 'vue-router'
  
  // 引入文件，动态路由
  const Home = () => import("@/views/home/index.vue");
  const routes = [
      {
          path: "/",
          component: Home,
      }
  ];
  
  const router = createRouter({
      history: createWebHashHistory(),
      routes
  })
  
  export default router
  复制代码

  上面所示的Home，是项目的首页，我们在src创建文件夹views，在其下创建home，在其下创建index.vue:

  

  内容如下：

  <template>
    hello world
  </template>
  复制代码

• 启动访问，输出hello world

请求组件 axios

• 安装axios

  npm install axios
  复制代码

• 创建文件

  在src下创建request文件夹，在其下创建index.js:

  

  内容如下：

  import axios from 'axios'
  // import {ElNotification} from 'element-plus'
  
  const env = import.meta.env
  // create an axios instance
  const service = axios.create({
     baseURL: env.VITE_BASE_API, // url = base url + request url
     timeout: 50000 // request timeout
  })
  
  // request interceptor
  service.interceptors.request.use(
     config => {
         config.headers['Content-Type'] = 'application/json'
         // do something before request is sent
         // config.headers['AUTHORIZATION'] = getToken()
         // config.headers['_username'] = getUsername()
         // config.headers['murmur'] = getMurmur()
         return config
     },
     error => {
         // do something with request error
         console.log(error) // for debug
         return Promise.reject(error).catch(err => {
             console.log(err)
         })
     }
  )
  
  // response interceptor
  service.interceptors.response.use(
     response => {
         const res = response.data
         if (!res.code) {
             return res;
         }
         if (res.code !== 0) {
             if (res.code === 401) {
                 removeToken();
                 // this.router.push("index")
                 // ElNotification({
                 //     title: 'Error',
                 //     message: '请重新登录',
                 //     type: 'error',
                 // })
                 location.reload()
             } else {
                 // ElNotification({
                 //     title: 'Error',
                 //     message: res.msg,
                 //     type: 'error',
                 // })
             }
         } else {
             return res
         }
     },
     error => {
         console.log('err' + error) // for debug
         // ElNotification({
         //     title: 'Error',
         //     message: error.msg,
         //     type: 'error',
         // })
         return Promise.reject(error).catch(err => {
             console.log(err)
         })
     }
  )
  export default service
  复制代码

  如上主要涉及对请求和响应的拦截，判断其状态：

  • 请求：设置一些公共配置，比如header的格式，token等
  • 响应：获取相应的状态，对于非正常相应，做出统一的处理。

  上面引入了element-pluis，所以在异常响应是可以使用其ElNotification提示框，本文不做引入了，需要的可以自行引入：element-plus，报错请自行去除或替换

  当我们使用axios去发送请求时，只需要创建api文件夹，在其下创建相应业务模块的js即可，如下所示：

  

vite.config.js配置

在没有引入vite前，我们的配置文件时vue.config.js，因为跨域的问题，所以需要在其内部配置请求的代理，从而实现请求转发，让我们能够在开发时正确的请求到后台的接口。

vite.config.js同样需要这样的配置。

• 安装path

  npm install --save-dev @types/node
  复制代码

• 开发环境变量

  定义一个全局配置文件.env.development

  

  内容如下：

  VITE_BASE_API='/dev-api'
  VITE_BASE_URL='http://localhost:2022'
  复制代码

• 修改vite.config.js

  import {defineConfig, loadEnv} from 'vite'
  import vue from '@vitejs/plugin-vue'
  import path from 'path' // 需安装此模块
  
  export default defineConfig(({mode, command}) => {
     const env = loadEnv(mode, process.cwd());
     return {
         plugins: [
             vue()
         ],
         resolve: {
             alias: {
                 '@': path.resolve(__dirname, 'src')
             }
         },
         define: {
             'process.env': {}
         },
         server: {
             host: 'localhost',
             port: '8080',
             strictPort: false,//设为true时端口被占用则直接退出，不会尝试下一个可用端口
             cors: true,//为开发服务器配置CORS, 默认启用并允许任何源
             open: true,//服务启动时自动在浏览器中打开应用
             hmr: false,//禁用或配置 HMR 连接
             proxy: {
                 [env.VITE_BASE_API]: {
                     target: env.VITE_BASE_URL,//实际请求地址
                     changeOrigin: true,
                     ws: true,// websocket支持
                     rewrite: (path) => path.replace(env.VITE_BASE_API, '')//替换实际请求后台地址
                 }
             },
             https: false
         }
     }
  })
  复制代码

总结

到此为止，一个vue3 + vite 的简单环境就搭建完成了。你学废了吗？

此环境主要用于平时开发建议前端项目使用，为了减少每次重新搭建项目，去百度的痛苦。

---

创作不易，如需转载，请标明作者【我犟不过你】。