前端项目搭建以及项目配置

前端项目搭建 - vite+vue3.0+ant

vite比起webpack速度更快

vite搭建项目

https://cn.vitejs.dev/

步骤：
1.打开cmd
2.找到项目应该建的文件夹
比如直接建到桌面上

cd desktop

3.创建项目
使用创建项目命令，然后根据提示填写项目名称，以及要用的技术，vue和ts，这时候就会在桌面上看到这个项目

npm create vite@latest

4.然后找到新建的项目，下载依赖，启动项目

npm install  //下载依赖
npm run dev  //启动项目

运行效果：

之后我们可以使用打包命令，可以看到会生成一个dist包。此时项目搭建完成。

npm run build 

可以把像components里面的文件以及App.vue里面没有用的东西给删掉

配置文件-vite.config.js

import {
    defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import {
    resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
   
  base: './', 
  plugins: [vue()],
  resolve: {
   
    alias: {
   
      '@': resolve(__dirname, 'src'),
      "@c": resolve(__dirname, "src/components"),
      "@view": resolve(__dirname, "src/view"),
      "@assets": resolve(__dirname, "src/assets"),
    },
    extensions: ['.js', '.jsx', '.json'], // 导入时想要忽略的扩展名列表
    preserveSymlinks: false, // 启用此选项会使 Vite 通过原始文件路径确定文件身份
  },
  server: {
   
    // 配置反向代理
    host: '0.0.0.0',  // 启动后浏览器窗口输入地址就可以进行访问
    port: 8001, // 端口号
    open: true, //是否自动打开浏览器
    cors: true, //为开发服务器配置 CORS , 默认启用并允许任何源
    https: false, //是否支持http2 如果配置成true 会打开https://localhost:3001/xxx;
    strictPort: true, //是否是严格的端口号，如果true，端口号被占用的情况下，vite会退出
    hmr: true, // 开启热更新
    // proxy: {
   
    //   '/api': {
   
    //     // 配置接口调用目标地址
    //     target: 'https://www.xxxx.com/xxxx',
    //     // 当进行代理时，Host 的源默认会保留（即Host是浏览器发过来的host），如果将changeOrigin设置为true，则host会变成target的值。
    //     changeOrigin: true,
    //     // 前缀 /api 是否被替换为特定目标，不过大多数后端给到的接口都是以/api打头，这个没有完全固定的答案，根据自己的业务需求进行调整
    //     rewrite: path => path.replace(/^\/api/, ''),
    //   }
    // }
  },
  build: {
   
    minify: "terser", // 必须开启：使用terserOptions才有效果
    outDir: 'iot',
    assetsDir: 'assets', // 指定生成静态文件目录
    brotliSize: true, // 启用 brotli 压缩大小报告
    chunkSizeWarningLimit: 2048, // chunk 大小警告的限制
    terserOptions: {
   
      compress: {
   
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
  preview: {
   
    port: 4001, // 指定开发服务器端口
    strictPort: true, // 若端口已被占用则会直接退出
    https: false, // 启用 TLS + HTTP/2
    open: true, // 启动时自动在浏览器中打开应用程序
    // proxy: { // 配置自定义代理规则
    //   '/api': {
   
    //     target: 'http://jsonplaceholder.typicode.com',
    //     changeOrigin: true,
    //     rewrite: (path) => path.replace(/^\/api/, '')
    //   }
    // },
    cors: true, // 配置 CORS
  }
})

在package.json文件的scripts加上 “serve”: “vite”,启动时候可以用npm run serve启动。

配置路由

vue-router
https://router.vuejs.org/

1.安装

npm install vue-router@4

2.在src文件夹下面新建一个router文件夹，文件夹下面有index.js文件用于引入router所需的方法以及页面路径配置引入，还有参数配置以及路由守卫，判断是否有token是否登录，未登录跳转到登录页。还有routes.js文件专门用来配置页面路径的。

// 导入router所需的方法
import {
    createRouter, createWebHashHistory } from 'vue-router'
// 导入路由页面的配置
import routes from './routes'
// 路由参数配置
const router = createRouter({
   
    history: createWebHashHistory(),
    routes,
})

router.beforeEach((to, from, next) => {
   
    //一般路由守卫中会做一些鉴权和权限控制的事情
    console.log(to)
    if (to.meta && to.meta.title) {
   
        document.title = to.meta.title
    }
    if(to.meta.isLogin){
   
        let token = sessionStorage.getItem("token");
        token ? next() :