构建完成

package.json

@@ -7,10 +7,15 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.16"
+    "axios": "^0.23.0",
+    "element-plus": "^1.1.0-beta.24",
+    "element3": "^0.0.40",
+    "vue": "^3.2.16",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.9.3",
     "vite": "^2.6.4"
-  }
+  },
+  "license": "MIT"
 }

src/App.vue

@@ -5,10 +5,8 @@ import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
-<div>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + Vite" />
-</div>
+<router-view>
+ </router-view>
 
 </template>
 

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
+import router from "@/router"
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
-createApp(App).mount('#app')
+const app= createApp(App).use(router).use(ElementPlus).mount('#app')

src/router/index.js

+import {createRouter,createWebHistory} from 'vue-router';
+import routes from './routes'
+
+const base = '/';//应用的基础请求路径
+
+const router = createRouter({
+    history:createWebHistory("/"), //history模式使用HTML5模式
+    routes
+});
+
+export default router;

src/router/routes.js

+export default[
+    {
+        path:'/',
+        name:'index',
+        component:()=>import('@/views/index.vue') //路由懒加载
+    }
+];

src/utils/cookies.js

+export {
+  getCookie,
+  setCookie,
+  delCookie
+}
+// 获取cookie、
+function getCookie(name) {
+  const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
+  const arr = document.cookie.match(reg)
+  if (arr) { return (arr[2]) } else { return null }
+}
+
+// 设置cookie,增加到vue实例方便全局调用
+function setCookie(c_name, value, expiredays) {
+  const exdate = new Date()
+  exdate.setDate(exdate.getDate() + expiredays)
+  document.cookie = c_name + '=' + escape(value) + ((!expiredays) ? '' : ';expires=' + exdate.toGMTString()) + ';path=/;'
+}
+
+// 删除cookie
+function delCookie(name) {
+  var exp = new Date()
+  exp.setTime(exp.getTime() - 1)
+  const cval = getCookie(name)
+  if (cval != null) { document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString() + ';path=/;' }
+}
+

src/utils/http.js

+/** ***********************
+封装请求的方法get，post
+
+options选项参数：
+ raw: false, 若为真，将后端返回的data对象整个作为返回结果，否则只返回data的data字段
+ default: undefined, 若该选项有值，则在接口返回任意错误时固定返回该值作为错误结果
+
+注意：若raw和default均未设置，则在接口返回错误时会直接抛出错误，无法获得返回值
+
+后端封装的错误
+// 通用错误
+// INVAILD_PARAM: 100, // 无效参数
+// NOT_FOUND: 101, // 未找到目标
+ **************************/
+
+import axios from 'axios'
+import qs from 'qs'
+import { Message } from 'element-ui'
+
+import store from '@/store'
+import router from '@/router'
+import { setCookie } from './auth'
+import _ from 'lodash'
+
+axios.defaults.timeout = 5000 * 4 // 超时配置
+axios.defaults.baseURL = '' // 配置接口地址
+// 配置请求地址
+const isProd = process.env.NODE_ENV === 'production'
+const isHttps = document.location.protocol === 'https:'
+const url_protocol = isHttps ? 'https://' : 'http://'
+const urls = {
+
+}
+// POST传参序列化(添加请求拦截器)
+axios.interceptors.request.use(
+  (config) => {
+    for (const key in config.data) {
+      if (config.data[key] === '' || config.data[key] === null || config.data[key] === undefined) {
+        config.data = _.omit(config.data, key)
+      } else if (typeof (config.data[key]) === 'string') {
+        config.data[key] = _.trim(config.data[key])
+      }
+    }
+    for (const key in config.params) {
+      if (config.params[key] === '' || config.params[key] === null || config.params[key] === undefined) {
+        config.params = _.omit(config.params, key)
+      } else if (typeof (config.params[key]) === 'string') {
+        config.params[key] = _.trim(config.params[key])
+      }
+    }
+    if (config.method === 'post' && config.headers['Content-Type'] !== 'multipart/form-data') {
+      config.data = qs.stringify(config.data, { skipNulls: true })
+    }
+    return config
+  },
+  (error) => {
+    console.log('错误的传参')
+    return Promise.reject(error)
+  }
+)
+
+// 返回状态判断(添加响应拦截器)
+axios.interceptors.response.use(
+  (res) => {
+    if (!res.data.success) {
+      return Promise.resolve(res)
+    }
+    return res
+  },
+  (error) => {
+    console.log('网络异常')
+    return Promise.reject(error)
+  }
+)
+
+// 弹出错误对话框
+async function errDlg(message, isThrow) {
+  await Message({
+    message: message,
+    type: 'error',
+    onClose: function() {
+      return false
+    }
+  })
+  if (isThrow) throw new Error(message)
+}
+
+// 统一处理返回结果
+async function fixResult({ status, data }, options = {}) {
+  // 处理服务器非正常返回
+  if (status !== 200) {
+    const errText = status + '错误'
+    await errDlg(errText)
+    throw new Error(errText)
+  }
+
+  // 处理已知错误
+  const hasDefault = typeof options.default !== undefined
+  switch (data.code) {
+    case 0: // 无错
+      return options.raw ? data : data.data
+    case 100:
+      return data
+    case 200: // 该功能需要登录
+      errDlg(data.msg)
+      router.push('/login')
+      return false
+    case 201:
+      errDlg(data.msg)
+      router.push('/login')
+      return false
+    case 202:
+      errDlg(data.msg)
+      return false
+    case 205:
+      errDlg(data.msg)
+      setCookie('csp-guid', '')
+      router.push('/login')
+      return false
+    case 300:
+      errDlg(data.msg)
+      setCookie('csp-password', '')
+      setCookie('csp-guid', '')
+      router.push('/login')
+      return false
+    default:
+      // 所有其他错误
+      if (!options.raw && !hasDefault) {
+        throw new Error(data.msg + '(' + data.code + ')')
+      }
+      break
+  }
+
+  return options.raw ? data : options.default
+}
+
+// 用get从服务器获取数据
+async function apiGet(server, url, params, options) {
+  if (!urls[server]) await errDlg('无效的服务器别名：' + server, true)
+
+  // 补充参数
+  params = params || {}
+  const guid = store.state.guid
+  if (!params.t) params.t = new Date().getTime() // 为了避免数据直接从缓存中获取必须传t
+  if (guid && !params.guid) params.guid = guid
+  params.TTP = 'pc'
+  try {
+    const res = await axios.get(urls[server] + url, { params })
+    return fixResult(res, options)
+  } catch (e) {
+    await errDlg('服务器访问失败', true)
+  }
+}
+
+// 用post向服务器发送数据
+async function apiPost(server, url, params, options, isOSS) {
+  if (!urls[server] && !isOSS) await errDlg('无效的服务器别名：' + server, true)
+  // 补充参数
+  params = params || {}
+  const guid = store.state.guid
+  if (guid && !params.guid) params.guid = guid
+  params.TTP = 'pc'
+  try {
+    let res
+    if (isOSS) {
+      res = await axios.post(server + url, params)
+    } else {
+      res = await axios.post(urls[server] + url, params)
+    }
+
+    return fixResult(res, options)
+  } catch (e) {
+    console.log(e)
+    await errDlg('服务器访问失败', true)
+  }
+}
+
+export { apiGet, apiPost }

src/views/index.vue

+<template>
+<div>
+    
+    <el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">搜索</el-button>
+<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
+</div>
+</template>
\ No newline at end of file

vite.config.js

-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import vue from '@vitejs/plugin-vue';
+const path = require('path');
+
+/**
+ * https://vitejs.dev/config/
+ * @type {import('vite').UserConfig}
+ */
+export default {  
+
+  alias: {
+    /*
+      路径别名
+      若为文件系统路径必须是绝对路径的形式，否则将以别名原样呈现，不会解析为文件系统路径路径 
+    */
+    //'@': process.cwd()+'/src'
+    //'@':path.resolve('src')
+    //'@':path.resolve(__dirname, 'src')
+    '@':path.resolve(__dirname, './src')
+  },
+  
+  plugins: [vue()],
+
+ 
+  /*
+    Project root directory/项目根目录（index.html所在位置），可以是绝对路径，也可以是相对于本配置文件的路径。
+    default：process.cwd() 返回 Node.js 进程的当前工作目录
+  */
+  //root:process.cwd(),
+
+  /*
+    Default: /
+    Base public path (应用基础请求路径) when served in development or production. Valid values include:
+    
+    Absolute URL pathname, e.g. /foo/
+    Full URL, e.g. https://foo.com/
+    Empty string or ./ (for embedded deployment)
+  */
+  base:'/',
+
+  /*
+    Directory to serve as plain static assets. 
+    Files in this directory are served at / during dev and copied to the root of outDir during build, and are always served or copied as-is without transform. 
+    The value can be either an absolute file system path or a path relative to project root.
+    静态资源目录，开发模式下会自动放到 / 下，生产模式下会自动放到 outDir 根路径下。
+    该目录可以配置为文件系统绝对目录或者相对于项目根目录的相对路径
+  */
+  publicDir:'public',
+
+
+  /*
+    Default: 'development' for serve, 'production' for build
+    Specifying this in config will override the default mode for both serve and build. This value can also be overridden via the command line --mode option.
+  */
+  //mode:'',
+
+  //vite开发服务器配置
+  server:{
+    host:'localhost',
+    port:3000,
+    open:true,
+    strictPort:false,//如果端口占用，是退出，还是尝试其他端口
+    https: false,// 是否开启 https
+
+    // 反向代理
+    // proxy: {
+    //   // string shorthand
+    //   '/foo': 'http://localhost:4567/foo',
+    //   // with options
+    //   '/api': {
+    //     target: 'http://jsonplaceholder.typicode.com',
+    //     changeOrigin: true,
+    //     rewrite: (path) => path.replace(/^\/api/, '')
+    //   },
+    //   // with RegEx
+    //   '^/fallback/.*': {
+    //     target: 'http://jsonplaceholder.typicode.com',
+    //     changeOrigin: true,
+    //     rewrite: (path) => path.replace(/^\/fallback/, '')
+    //   }
+    // }
+  },
+  
+  //生产模式打包配置
+  build:{
+    outDir: 'dist',//Specify the output directory (relative to project root).
+  }
+
+}
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()]
-})