0
0

手把手完成前端Vue3 + Vite项目工程化搭建

vue3_vite_project

基于 

Vue3

+ 

Vite

搭建的前端工程化项目演示模板

环境准备

  • 开发环境：Node.js v16.14.2 + npm v8.3.2
  • 开发工具：Visual Studio Code or WebStorm
  • 源代码管理：Git
  • npm镜像：npm config set registry https://registry.npmmirror.com

技术栈

技术栈描述Vue渐进式 JavaScript 框架Vite新一代前端开发与构建工具Element Plus基于 Vue 3，面向设计师和开发者的组件库Pinia符合直觉的 Vue.js 状态管理库vue-routerVue.js 的官方路由管理库SassCSS 预处理器VueUse基于 Vue 组合式 API 的实用工具集Axios用于浏览器和 Node.js 的基于 Promise 的 HTTP 请求库Echarts一个基于 JavaScript 的开源可视化图表库Eslint可配置的 JavaScript 检查器Prettier代码格式化工具

项目构建

#创建项目npm create vite

#安装依赖npminstall#启动项目npm run dev

#构建项目npm run build

到这一步，如果能成功运行项目，恭喜你！一个项目的基本框架已经搭建完成！

整理项目结构

主要是让项目工程更加感觉清晰

<!--src/App.vue-->
<template>
  <div>
    <h1>App</h1>
  </div>
</template>

删除 

src/style.css

文件

删除 

src/main.js

中引入的 

style.css

文件

使用 Git 管理源代码

#Git仓库初始化git init

#添加所有文件到版本库gitadd.#提交所有文件到版本库git commit -m"feat: 项目初始化完成"#新建 dev 分支，并切换到 dev 分支git checkout -b dev

本地代码仓库初始化完成，之后的开发工作都在当 dev 分支上进行

根据技术栈提供的文档，完成项目搭建

安装 Element Plus 组件库

#安装 Element Plusnpminstall element-plus

引入 Element Plus 组件库并使用测试安装结果

# src/main.jsimport{ createApp } from 'vue'import ElementPlus from 'element-plus'# 新增import'element-plus/dist/index.css'# 新增import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)# 新增：使用 Element Plus 组件库
app.mount('#app')

测试安装结果

<!--src/App.vue-->
<template>
  <div>
    <h1>App</h1>
    <el-button type="primary">button</el-button>
  </div>
</template>

当按钮能正常显示时，说明安装成功

安装 Vue Router 路由管理库

#安装 Vue Routernpminstall vue-router

在项目的 src 目录下新建一个 

views

目录，然后在 views 目录下新建两个页面，用于路由跳转。

在项目的 src 目录下新建一个 

router

目录，然后在 router 目录下新建一个 index.js 文件，该文件会作为 Vue Router 的入口文件，该文件内容如下

// src/router/index.jsimport{createRouter, createWebHistory}from"vue-router";const router =newcreateRouter({history:createWebHistory(),routes:[{path:"/login",name:"Login",component:()=>import("../views/login/index.vue"),},{path:"/dashboard",name:"Dashboard",component:()=>import("../views/dashboard/index.vue"),},]})exportdefault router

在 src/main.js 文件中引入 Vue Router，并使用 Vue Router

// src/main.js// ...import router from'./router'// 新增
app.use(router)// 新增：使用 Vue Router// ...

修改 App.vue 文件，添加路由跳转

<template>
  <div class="app-container">
    <ul>
      <li><router-link to="/dashboard">首页</router-link></li>
      <li><router-link to="/login">登录</router-link></li>
    </ul>
    <router-view />
  </div>
</template>

访问首页和登录页，查看路由是否正常跳转

**

router-link

和 

router-view

是 Vue Router 的两个核心组件，router-link 是用来实现路由跳转，router-view 是用来显示路由对应的内容。**

安装 Pinia 状态管理库

#安装 Pinianpminstall pinia

在项目的 src 目录下新建一个 

store

目录，然后在 store 目录下新建一个 index.js 文件，该文件会作为 Pinia 的入口文件

// src/store/index.jsimport{createPinia}from'pinia'const pinia =createPinia()exportdefault pinia

在 src/main.js 文件中引入 Pinia，并使用 Pinia

// src/main.js// ...import pinia from'./store'// 新增
app.use(router)// 新增：使用 Pinia// ...

在 src/store 目录下创建一个 modules 目录，然后在 modules 目录下创建一个 

user

状态管理对象，用于管理整个项目的用户登录状态

// src/store/modules/user.jsimport{defineStore}from'pinia'import{ref}from'vue'const useUserStore =defineStore('user',()=>{const userInfo =ref({})const loginStatus =ref(false)const token =ref('')/**
     * 登录
     */functionhandleLogin(){returnnewPromise((resolve, reject)=>{if(Math.random()>0.8){
                loginStatus.value =true
                token.value =String(newDate().getTime())
                userInfo.value ={name:'admin',avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',}resolve('登录成功')}else{reject('登录失败')}})}/**
     * 退出登录
     */functionhandleLogout(){returnnewPromise((resolve)=>{
            loginStatus.value =false
            token.value =''
            userInfo.value ={}resolve()})}return{
        userInfo,
        loginStatus,
        token,
        handleLogin,
        handleLogout
    }})exportdefault useUserStore

在登录页面，使用 Pinia 获取用户状态管理对象，并调用登录方法

<!--src/views/login/index.vue-->
<script setup>
import useUserStore from '../../store/modules/user'
const userStore = useUserStore()
import {ElMessage } from 'element-plus'

/**
 * 登录
 */
function login() {
  userStore.handleLogin().then((res) => {
    ElMessage.success(res)
  }).catch(err => {
    ElMessage.error(err)

  })
}

/**
 * 退出登录
 */
function loginOut() {
  userStore.handleLogout().then(() => {
    ElMessage.success('退出登录成功')
  }).catch(err => {
    ElMessage.error(err)
  })
}
</script>

<template>
<div class="login-container">
  <el-button type="primary" @click="login">登 录</el-button>
  <el-button type="primary" @click="loginOut">退出登录</el-button>

  <hr>
  <h1>当前登录状态：{{ userStore.loginStatus ? '已登录' : '未登录' }}</h1>
  <ul>
    <li>用户名：{{ userStore.userInfo.name }}</li>
    <li>头 像：<img :src="userStore.userInfo.avatar" alt=""></li>
  </ul>
</div>
</template>

安装 Sass CSS 预处理器

#安装 Sass，安装时需要添加 -D 参数，表示将 Sass 添加到开发依赖中，在打包过程中，Sass 会自动编译为 CSSnpminstall sass -D

在项目的 src 目录下新建一个 

styles

目录，然后在 styles 目录下新建一个 

variables.scss

文件，该文件存放全局的 Sass 变量

//src/styles/variables.scss
$success: #48C78E;
$danger: #F28482;

在首页测试 Sass 变量，在 src/views/dashboard/index.vue 文件中修改如下

<template>
  <h1 class="success">这是一个成功样式</h1>
  <h2 class="danger">这是一个告警样式</h2>
</template>

<style scoped lang="scss">
.success{
  color:$success;
}
.danger{
  color: $danger;
}
</style>

此时浏览器会提示 

Undefined variable.

，因为我们需要在 vite.config.js 文件中引入该文件，才能使用 Sass 变量

// vite.config.jsimport{ defineConfig }from'vite'import vue from'@vitejs/plugin-vue'exportdefaultdefineConfig({plugins:[vue()],css:{// CSS 预处理器preprocessorOptions:{// 定义全局 SCSS 变量scss:{javascriptEnabled:true,additionalData:"@use '/src/styles/variables.scss' as *;",},},},})

查看页面会显示成功和告警样式，表示 Sass 变量已经正常工作了

安装 VueUse 工具库

#安装 VueUsenpm i @vueuse/core

在 src/views/dashboard/index.vue 文件中，使用 VueUse 的 

useMouse

方法，获取当前鼠标实时位置

<script setup>
import {useMouse} from '@vueuse/core'
const {x,y} = useMouse()
</script>
<template>
  <h1 class="success">这是一个成功样式</h1>
  <h2 class="danger">这是一个告警样式</h2>

  <p>当前鼠标位置：X:{{ x }}、Y:{{ y }}</p>
</template>

<style scoped lang="scss">
.success{
  color:$success;
}
.danger{
  color: $danger;
}
</style>

页面上会实时显示鼠标的位置，表示 VueUse 工具库已经正常工作了，需要使用其它函数，可以参考 VueUse 文档

安装 Axios 网络请求库

#安装 Axiosnpminstall axios

在 src 目录下新建一个 utils 目录，然后在 utils 目录下新建一个 

request.js

文件，在该文件中，可以在发起请求前向请求头中添加一些请求头等信息

// src/utils/request.jsimport axios from'axios'const request = axios.create({baseURL: 'http://xxx.xxx.xxx.xxx // 请求的后端接口地址})/**
 * 请求拦截器
 */
request.interceptors.request.use(config=>{
    console.log('请求参数：',config)})/**
 * 响应拦截器
 */
request.interceptors.response.use(response=>{
    console.log('响应参数：',response)})exportdefault request

在 src 目录下新建一个 api 目录，然后在 api 目录下新建一个 

user.js

文件，在该文件中，封装一些用户相关的接口

import request from"../utils/request";/**
 * 获取验证码
 * @param checkKey
 */exportfunctiongetCodeInfo(checkKey){returnrequest({method:"get",url:`/xxx/xxx/${checkKey}`,});}

回到登录页面，测试获取验证码接口，修改如下：

<script setup>
import {getCodeInfo} from '../../api/user'
import {onMounted, ref} from "vue";

const captchaInfo = ref('')
onMounted(() => {
  getCodeInfo(new Date().getTime()).then(({data}) => {
    captchaInfo.value = data.result
  })
})

</script>

<template>
<div class="login-container">
  <ul>
    <li>验证码：<img :src="captchaInfo" alt=""></li>
  </ul>
</div>
</template>

页面上成功显示了验证码，表示 Axios 工具库已经正常工作了，之后其它 API 接口都统一放到 src/api 目录下统一管理

安装 Echarts 图表库

#安装 Echartsnpminstall echarts

在 src/views/dashboard/index.vue 文件中，使用 Echarts 的 

init

方法，初始化一个图表

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";

const chartRef = ref(null)
let echartClient = null
onMounted(() => {
  initChart()
})
function initChart() {
  echartClient =  echarts.init(chartRef.value)
  echartClient.setOption({
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  })
}

</script>
<template>
  <div class="chart-box" ref="chartRef" ></div>
</template>

<style scoped lang="scss">
.chart-box{
  width: 600px;
  height: 400px;
}
</style>

页面上可以看到一个柱状图，表示 Echarts 工具库已经正常工作了

安装 Eslint 代码检查工具

#安装 Eslint 及相关插件npminstall eslint -Dnpminstall eslint-config-airbnb-base -Dnpminstall eslint-define-config -Dnpminstall eslint-plugin-import -Dnpminstall eslint-plugin-vue -D

在项目更目录下新建一个 

.eslintrc.js

文件，配置如下：

// .eslintrc.jsconst{ defineConfig }=require("eslint-define-config");

module.exports =defineConfig({root:true,env:{browser:true,node:true,jest:true,es6:true,},plugins:["vue"],parser:"vue-eslint-parser",parserOptions:{ecmaVersion:"latest",sourceType:"module",allowImportExportEverywhere:true,ecmaFeatures:{jsx:true,},},extends:["eslint-config-airbnb-base","eslint:recommended","plugin:vue/vue3-essential","plugin:vue/vue3-recommended","plugin:vue/vue3-strongly-recommended","plugin:import/recommended","plugin:import/errors","plugin:import/warnings",// ".eslintrc-auto-import.json", // 解决 Eslint 提示 no-undef 错误"prettier","plugin:prettier/recommended",],/**
   * 规则说明：off 或 0 - 关闭规则；warn 或 1 - 打开规则作为警告（不影响退出代码）；error 或 2 - 打开规则作为错误（退出代码将为 1）
   */rules:{// 不使用制表符"prettier/prettier":2,// 强制使用分号semi:[2,"always"],// 强制使用双引号quotes:[2,"double"],// 解决最后一个逗号// "comma-dangle": [2, "never"],// 关闭默认参数应为最后一个"default-param-last":0,// 禁止未使用的变量"no-unused-vars":1,// 关闭组件命名规则"vue/multi-word-component-names":0,// 禁止使用多余的包"import/no-extraneous-dependencies":0,// 确保在导入路径内一致使用文件扩展名"import/extensions":0,// 确保导入指向可以解析的文件/模块"import/no-unresolved":0,// 首选默认导出导入/首选默认导出"import/prefer-default-export":0,// 要求使用 let 或 const 而不是 var"no-var":2,// 禁止使用 new 以避免产生副作用"no-new":1,// 禁止变量声明与外层作用域的变量同名"no-shadow":0,// 禁用 console"no-console":0,// 禁止标识符中有悬空下划线"no-underscore-dangle":0,// 禁止在可能与比较操作符相混淆的地方使用箭头函数"no-confusing-arrow":0,// 禁用一元操作符 ++ 和 --"no-plusplus":0,// 禁止对 function 的参数进行重新赋值"no-param-reassign":0,// 禁用特定的语法"no-restricted-syntax":0,// 禁止在变量定义之前使用它们"no-use-before-define":0,// 禁止直接调用 Object.prototypes 的内置属性"no-prototype-builtins":0,// 禁止可以在有更简单的可替代的表达式时使用三元操作符"no-unneeded-ternary":2,// 禁止重复模块导入"no-duplicate-imports":2,// 禁止在对象中使用不必要的计算属性"no-useless-computed-key":2,// 禁止不必要的转义字符"no-useless-escape":0,// 禁用 continue 语句"no-continue":0,// 强制使用一致的缩进indent:[2,2,{SwitchCase:1}],// 强制使用骆驼拼写法命名约定camelcase:0,// 强制类方法使用 this"class-methods-use-this":0,// 要求构造函数首字母大写"new-cap":2,// 强制一致地使用 function 声明或表达式"func-style":0,// 强制一行的最大长度"max-len":0,// 要求 return 语句要么总是指定返回的值，要么不指定"consistent-return":0,// 强制switch要有default分支"default-case":2,// 强制剩余和扩展运算符及其表达式之间有空格"rest-spread-spacing":2,// 要求使用 const 声明那些声明后不再被修改的变量"prefer-const":2,// 强制箭头函数的箭头前后使用一致的空格"arrow-spacing":2,// 只强制对象解构，不强制数组解构"prefer-destructuring":[2,{object:true,array:false}],// 禁止在对象中使用不必要的计算属性"no-unused-expressions":0,},});

修改 

package.json

文件，在 

scripts

中添加 

"lint": "eslint --ext .js,.vue --fix src"

，运行 

npm run lint

命令，会自动修复所有代码问题

安装 Prettier 代码格式化工具

#安装 Prettier 及相关插件npminstall-D prettier
npminstall-D eslint-plugin-prettier

在项目根目录下新建一个 

.prettierrc.cjs

文件，配置如下：

module.exports ={// JSX 中的右尖括号是否换行，默认falsejsxBracketSameLine:false,// 文件末尾是否换行，默认trueendOfLine:"auto",// 换行符类型 (lf|crlf|cr;默认lf)rangeStart:0,// 单个属性是否换行，默认falsesingleAttributePerLine:false,// 是否使用双引号，默认truedoubleQuote:true,// 是否使用单行注释，默认falseexperimentalTernaries:false,// (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)arrowParens:"always",// 开始标签的右尖括号是否跟随在最后一行属性末尾，默认falsebracketSameLine:false,// 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})bracketSpacing:true,// 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto)embeddedLanguageFormatting:"auto",// 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css)htmlWhitespaceSensitivity:"css",// 当文件已经被 Prettier 格式化之后，是否会在文件顶部插入一个特殊的 @format 标记，默认falseinsertPragma:false,// 在 JSX 中使用单引号替代双引号，默认falsejsxSingleQuote:false,// 每行最多字符数量，超出换行(默认80)printWidth:120,// 超出打印宽度 (always | never | preserve )proseWrap:"preserve",// 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)quoteProps:"as-needed",// 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件，默认falserequirePragma:false,// 结尾添加分号semi:true,// 使用单引号 (true:单引号;false:双引号)singleQuote:false,// 缩进空格数，默认2个空格tabWidth:2,// 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号trailingComma:"es5",// 指定缩进方式，空格或tab，默认false，即使用空格useTabs:false,// vue 文件中是否缩进 <style> 和 <script> 标签，默认 falsevueIndentScriptAndStyle:false,};

修改 

package.json

文件，在 

scripts

中添加 

"prettier": "prettier --write src/**/*.{vue,js,jsx,ts,tsx,json,css,scss,md}"

，运行 

npm run prettier

命令，会自动格式化所有代码

性能优化及打包策略

配置 Element Plus 按需导入

#安装插件npminstall-D unplugin-vue-components unplugin-auto-import

修改 

vite.config.js

文件，添加了 

vue

, 

vue-router

, 

@vueuse/core

相关函数自动导入配置

自动导入 

src/**/components

目录下的组件，无需在页面中手动导入组件，添加了路径别名，

@

默认指向 

src

目录，导入模块的时候可以直接使用 

import xxx from "@/xxx/xxx"

形式

// vite.config.jsimport{ defineConfig }from"vite";import vue from"@vitejs/plugin-vue";import AutoImport from"unplugin-auto-import/vite";import Components from"unplugin-vue-components/vite";import{ ElementPlusResolver }from"unplugin-vue-components/resolvers";import{ resolve }from"path";const pathSrc =resolve(__dirname,"src");exportdefaultdefineConfig({plugins:[vue(),// 自动导入AutoImport({// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports:["vue","vue-router","@vueuse/core"],resolvers:[// 自动导入 Element Plus 相关函数ElementPlusResolver(),],eslintrc:{enabled:true,// 解决 Eslint 提示 no-undef 错误},// 配置文件位置 (false:关闭自动生成)dts:resolve(__dirname,"src/types/auto-imports.d.ts"),}),Components({resolvers:[// 自动导入 Element Plus 组件ElementPlusResolver(),],// 指定自定义组件位置(默认:src/components)dirs:["src/**/components"],// 配置文件位置 (false:关闭自动生成)dts:resolve(__dirname,"src/types/components.d.ts"),}),],resolve:{// 导入文件时省略文件扩展名extensions:[".js",".ts",".vue",".json","es"],// 配置路径别名alias:{"@": pathSrc },},// ...});

删除 

src/main.js

文件中之前引入的 Element Plus 的代码

// src/main.jsimport{ createApp }from"vue";// import ElementPlus from "element-plus";  // 删除import router from"./router";import pinia from"./store";// import "element-plus/dist/index.css";  // 删除import App from"./App.vue";const app =createApp(App);
app.use(router);
app.use(pinia);// app.use(ElementPlus); // 删除
app.mount("#app");

删除 

src/views/login/index.vue

中的 

import { ElMessage } from "element-plus";

代码，现在所有与 Element Plus 相关的代码都被自动导入了，无需再手动引入。

**修改 

.eslintrc.cjs

文件中 

extends

项，添加 

".eslintrc-auto-import.json"

配置，解决 Eslint 提示 no-undef 错误**

# ...
extends: [# ...".eslintrc-auto-import.json", # 解决 Eslint 提示 no-undef 错误]# ...

按需导入 Echarts 图表库

在 

src/utils

文件夹下创建 

echarts.js

文件，把需要用到的图表组件导入到该文件中，在需要使用 Echarts 的地方直接导入该文件，这样就可以按需导入 Echarts 图表库了

// src/utils/echarts.js// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。import*as echarts from"echarts/core";// 引入柱状图图表，图表后缀都为 Chartimport{ BarChart }from"echarts/charts";// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Componentimport{
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,}from"echarts/components";// 标签自动布局、全局过渡动画等特性import{ LabelLayout, UniversalTransition }from"echarts/features";// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步import{ CanvasRenderer }from"echarts/renderers";// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,]);exportdefault echarts;

修改 

src/views/dashboard/index.vue

文件，引入 

src/utils/echarts.js

文件，这样就可以按需导入 Echarts 图表库了

// import * as echarts from "echarts"; // 删除import echarts from"@/utils/echarts";// 新增// ...

打包静态资源优化

#安装插件npminstall terser -D

修改 

vite.config.js

文件，添加了 

terser

配置，打包时会自动压缩 js 文件，配置了 

build.rollupOptions

将打包后的静态资源按文件类型进行分类

import{ defineConfig }from"vite";// ...exportdefaultdefineConfig({// ...// 预览模式配置preview:{port:8081,open:true,},// 开发模式配置server:{https:false,// 是否开启 httpsport:8080,// 端口号host:"0.0.0.0",// 监听所有地址open:true,// 服务启动时是否自动打开浏览器cors:true,// 允许跨域proxy:{},// 自定义代理规则},// 构建配置build:{chunkSizeWarningLimit:2000,// 消除打包大小超过500kb警告minify:"terser",// Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效terserOptions:{compress:{keep_infinity:true,// 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题drop_console:true,// 生产环境去除 consoledrop_debugger:true,// 生产环境去除 debugger},format:{comments:false,// 删除注释},},rollupOptions:{output:{// 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值entryFileNames:"js/[name].[hash].js",// 用于命名代码拆分时创建的共享块的输出命名chunkFileNames:"js/[name].[hash].js",// 用于输出静态资源的命名，[ext]表示文件扩展名assetFileNames:(assetInfo)=>{const info = assetInfo.name.split(".");let extType = info[info.length -1];// console.log('文件信息', assetInfo.name)if(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)){
            extType ="media";}elseif(/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)){
            extType ="img";}elseif(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)){
            extType ="fonts";}return`${extType}/[name].[hash].[ext]`;},},},},});

开启 Gzip 压缩

#安装插件npminstall vite-plugin-compression -D

修改 

vite.config.js

文件，添加了 

vite-plugin-compression

插件

import{ defineConfig }from"vite";// ...import viteCompression from"vite-plugin-compression";exportdefaultdefineConfig({plugins:[// ...viteCompression(),],// ...});

在 

Vite

构建项目时开启 

Gzip

压缩后，为了确保 

Nginx

能够正确处理并返回 

Gzip

压缩后的文件，你需要在 

Nginx

服务器上进行相应的配置

http {gzip on;
    gzip_static on;# 开启静态gzip功能，优先返回预压缩的.gz文件
    server {
        listen 8080;
        server_name localhost;
        location / {
              root /usr/share/nginx/html/dist;# 替换为你的实际项目部署目录
              index  index.html index.htm;
              try_files $uri$uri/ /index.html;# 指定如果存在预压缩文件，则优先返回 .gz 文件
              gzip_static always;}
        error_page   500502503504  /50x.html;
        location = /50x.html {
            root   html;}}}

在这个配置中，Nginx会在接收到请求时首先查找是否存在对应的.gz预压缩文件，如果存在则直接返回该文件，否则会返回原始未压缩的文件。

确保Vite构建时生成的预压缩文件与原始文件位于同一目录下，并且命名规范遵循Nginx的预期（即与原始文件同名，但扩展名为.gz）。同时，在重启Nginx服务后使新配置生效。

标签： 前端 vue.js 前端框架
本文转载自: https://blog.csdn.net/wagdgdgd/article/details/136419171
版权归原作者 吃面要加卤蛋 所有， 如有侵权，请联系我们删除。
登录后发布评论

“手把手完成前端Vue3 + Vite项目工程化搭建”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航