vite config

vite配置terser,压缩代码及丢弃console

只需安装terser,无需import terser 然后使用下方配置

npm i terser
    build: {
        minify: "terser",
        terserOptions: {
            compress: {
                drop_console: true,
                drop_debugger: true,
            },
        }
 
    },


// vue3+vite打包配置，绝对路径改相对路径，更改静态资源目录


export default defineConfig({
  build: {
    rollupOptions: {
      output: {
      	// 在这里修改静态资源路径
        chunkFileNames: 'static/assets/js/[name]-[hash].js',
        entryFileNames: 'static/assets/js/[name]-[hash].js',
        assetFileNames: 'static/assets/[ext]/[name]-[hash].[ext]',
      }
    }
  },
  base: './', // 这里更改打包相对绝对路径
  minify: true, // 是否压缩代码
  sourceMap: true, // 是否生成sourceMap
  plugins: [vue(),basicSsl()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src',
        import.meta.url))
    }
  },
  server: { //  
    port: 8082,
    proxy: {
      '/rss': {
        target: ENV_URL, //要访问的地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/rss/, ""),
        // secure: false
      }
    },
    https:true,
    host: '0.0.0.0' // ← 新增内容 ←
  }
})

模式

默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。
这意味着当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量：

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量 才会暴露给经过 vite 处理的代码。例如下面这些环境变量：

# .env.production
VITE_APP_TITLE=My App

在你的应用中，你可以使用 import.meta.env.VITE_APP_TITLE 渲染标题。

环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

.env 文件

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

vite.config.js

import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import vue from "@vitejs/plugin-vue";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import path from "path";
 
export default defineConfig({
  plugins: [
    vue(),
    //引入vue 插件
    AutoImport({
      imports: ["vue"],
      dts: "src/auto-import.d.ts",
    }),
    //plus按需引入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    //plus按需引入
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  build: {
    minify: "terser", // 必须开启：使用terserOptions才有效果
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
 
  resolve: {
    //配置根路径别名： import('@/pages/login/login.vue')
    alias: {
      "@": path.resolve(__dirname, "src"), 
      // 注意一定不要随意命名，a b c这样的，项目的目录也不能为关键字保留字！！
      "comp": resolve(__dirname, "src/components"),
      // 配置图片要这样引用
      "/img": "./src/assets",
    },
  },
  // 跨域
  server: {
    //使用IP能访问
    host: "0.0.0.0",
    // 热更新
    hmr: true,
    //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    strictPort: false,
    //自定义代理规则
    proxy: {
      // 选项写法
      "/api": {
        target: "https://admin.itrustnow.com",
        // target: "http://192.168.0.50:8083",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

Vite常用基本配置

{
  root: process.cwd(), // 项目根目录（index.html 文件所在的位置）,
  base: '/', // 开发或生产环境服务的公共基础路径 配置引入相对路径
  mode: 'development', // 模式
  plugins: [vue()], // 需要用到的插件数组
  publicDir: 'public', // 静态资源服务的文件夹
  cacheDir: 'node_modules/.vite', // 存储缓存文件的目录
  resolve: {
    alias: [ // 文件系统路径别名
      {
        find: /\/@\//,
        replacement: pathResolve('src') + '/'
      }
    ],
    dedupe: [], // 强制 Vite 始终将列出的依赖项解析为同一副本
    conditions: [], // 解决程序包中 情景导出 时的其他允许条件
    mainFields: [], // 解析包入口点尝试的字段列表
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 导入时想要忽略的扩展名列表
    preserveSymlinks: false, // 启用此选项会使 Vite 通过原始文件路径确定文件身份
  },
  css: {
    modules: {
      scopeBehaviour: 'global' | 'local',
      // ...
    },
    postcss: '', // 内联的 PostCSS 配置 如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源
    preprocessorOptions: { // css的预处理器选项
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  },
  json: {
    namedExports: true, // 是否支持从.json文件中进行按名导入
    stringify: false, //  开启此项，导入的 JSON 会被转换为 export default JSON.parse("...") 会禁用按名导入
  },
  esbuild: { // 最常见的用例是自定义 JSX
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  },
  assetsInclude: ['**/*.gltf'], // 指定额外的 picomatch 模式 作为静态资源处理
  logLevel: 'info', // 调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent'
  clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
  envDir: '/', // 用于加载 .env 文件的目录
  envPrefix: [], // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中
  server: {
    host: '127.0.0.1', // 指定服务器应该监听哪个 IP 地址
    port: 5000, // 指定开发服务器端口
    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
    force: true, // 强制使依赖预构建
    hmr: { // 禁用或配置 HMR 连接
      // ...
    },
    watch: { // 传递给 chokidar 的文件系统监听器选项
      // ...
    },
    middlewareMode: '', // 以中间件模式创建 Vite 服务器
    fs: {
      strict: true, // 限制为工作区 root 路径以外的文件的访问
      allow: [], // 限制哪些文件可以通过 /@fs/ 路径提供服务
      deny: ['.env', '.env.*', '*.{pem,crt}'], // 用于限制 Vite 开发服务器提供敏感文件的黑名单
    },
    origin: 'http://127.0.0.1:8080/', // 用于定义开发调试阶段生成资产的 origin
  },
  build: {
    target: ['modules'], // 设置最终构建的浏览器兼容目标
    polyfillModulePreload: true, // 是否自动注入 module preload 的 polyfill
    outDir: 'dist', // 指定输出路径
    assetsDir: 'assets', // 指定生成静态文件目录
    assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
    cssCodeSplit: true, // 启用 CSS 代码拆分
    cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
    sourcemap: false, // 构建后是否生成 source map 文件
    rollupOptions: {}, // 自定义底层的 Rollup 打包配置
    lib: {}, // 构建为库
    manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
    ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
    ssr: undefined, // 生成面向 SSR 的构建
    minify: 'esbuild', // 指定使用哪种混淆器
    terserOptions: {}, // 传递给 Terser 的更多 minify 选项
    write: true, // 启用将构建后的文件写入磁盘
    emptyOutDir: true, // 构建时清空该目录
    brotliSize: true, // 启用 brotli 压缩大小报告
    chunkSizeWarningLimit: 500, // chunk 大小警告的限制
    watch: null, // 设置为 {} 则会启用 rollup 的监听器
  },
  preview: {
    port: 5000, // 指定开发服务器端口
    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
  },
  optimizeDeps: {
    entries: [], // 指定自定义条目——该值需要遵循 fast-glob 模式
    exclude: [], // 在预构建中强制排除的依赖项
    include: [], // 可强制预构建链接的包
    keepNames: false, // true 可以在函数和类上保留 name 属性
  },
  ssr: {
    external: [], // 列出的是要为 SSR 强制外部化的依赖,
    noExternal: '', // 列出的是防止被 SSR 外部化依赖项
    target: 'node', // SSR 服务器的构建目标
  }
}

route

在vue3.0中取消了vue2.0的部分api，新增的两个API `useRouter,useRoute`。

4、vue3.0中路由跳转 1、第一步先引入import {useRouter} from 'vue-router'; 2、第二步 const router = useRouter(); 3、第三步 router.push({path:'/home', query:{id:'12' }})

5、vue3.0如何取出路由的值 1、第一步先引入import {useRoute} from 'vue-router'; 2、第二步 const route = useRoute(); 3、第三步route.query.id

Vue3—路由传参query和params

路由传参有query和params两种方式。

query以?形式传参，如 / user ? id=1 & name=tom & gender=male

params通过:形式绑定参数传参，如 / user / :id / :name / :gender --> / user / 1 / tom / male

总结：路由传参用query或param都可以。一般采用params方式进行路由传参，其url比较美观。

1.定义路由

<!--routers/router.ts-->
    {
      path: '/test',       //测试路由
      name: 'test',
      component: () => import('~/views/test/index.vue'),
      meta: {
        title: '测试路由'
      }
    },
    {
      path: '/user',      //query定义路由
      name: 'user',
      component: () => import('~/views/user/index.vue'),
      meta: {
        title: 'user页面'
      }
    },
    
    // {
    //   path: '/user/:id/:name/:age/:gender',     //params定义路由(特殊，注意！！)
    //   name: 'user',
    //   component: () => import('~/views/pgc/user/index.vue'),
    //   meta: {
    //     title: 'user页面'
    //   }
    // }

2.路由跳转

<!--views/test/index.vue-->
<template>
  <div>Test页面</div>
  <router-link to="/user?id=12&name=tom&age=13&gender=male">
    query传参
  </router-link>
  <router-link to="/user/12/tom/13/male">
    params传参
  </router-link>
</template>

3.接收参数

<!--views/user/index.vue-->
<template>
  <div>user页面接收参数</div>
  <div>
    <!-- 获得到query传参的参数 { "id": "12", "name": "tom", "age": "13", "gender": "male" } -->
    {{ query }}
  </div>
  <div>
    <!-- 获得到params传参的参数 { "id": "12", "name": "tom", "age": "13", "gender": "male" } -->
    {{ params }}
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router';  //1.先在需要跳转的页面引入useRouter
const { query, params } = useRoute();   //2.在跳转页面定义router变量，解构得到指定的query和params传参的参数
</script>

使用 Router History

// router.js  createWebHistory    .env.producation  默认为 ''
const router = createRouter({
  history: createWebHistory (import.meta.env.BASE_URL),
  // history: createWebHashHistory (import.meta.env.BASE_URL),
  routes:[]
  })


VITE_APP_BASE_API='/app'
BASE_URL='uapp'


// vite config js

 base: '/uapp',

nginx.conf

import { fileURLToPath, URL } from 'node:url'
import cesium from 'vite-plugin-cesium';

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

 
export default defineConfig({
  base: '/uapp',
  build: {
    
    minify: 'terser', // 必须启用：terserOptions配置才会有效
    terserOptions: {
      compress: {
        // 生产环境时移除console.log调试代码
        drop_console:false,
        drop_debugger: false,
        // drop_console:true,
        // drop_debugger: true,
      }
    }
  },
  server: {
    open: true, // 启动时自动在浏览器中打开应用程序
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:18088',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/app'),
      },
    }
  },
  plugins: [
    vue(),cesium()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  } 
 
  
})

使用root还是alias

刚才提到root和alias这两个指令都可以使用，实际我们应该如何选择呢？

当无前缀时，使用root和alias一样，一般使用root; 当有前缀时，如果前缀名和目录路径最后一段路径一致，那应该使用root，而不一致的话，应该使用alias.。

try_files后面可以定义多个文件路径和最后一个作为内部跳转的uri，其中文件路径是和 alias 和 root 两个指令合在一起构造而成；多个文件以第一个找到的文件作为请求；而文件后面以"/"结尾，会检查目录是否存在；当文件都找不到时，就会去以最后一个uri进行内部跳转请求。

请求了
http://localhost:8081/personalcenter/static/js/1.326021aaadef08402891.js
细心的小伙伴应该已经看出来了失败的原因了，如果还有小伙伴没看出来的我把他两放一起，你们仔细瞧
成功的: http://localhost:8081/static/js/0.141001dab9a800dfa8d8.js
失败的: http://localhost:8081/personalcenter/static/js/1.326021aaadef08402891.js
是不是失败的请求与成功的请求相比url多了一个personalcenter，personalcenter是啥？这不就是我们一级路由的名称嘛，接着我们看看打包的文件夹内有personalcenter路径吗？是不是没有，只有static，所以现在明白为啥刷新后请求失败了吧，因为路径根本不存在

nginx 相关配置

location / { try_files $uri $uri/ /index.html; }

这里用到了try_files配置，简单说下它的作用：它首先匹配url有没有对应的资源（即上面的uri），如果有则返回；如果没有，则继续查找url目录下（即上面的uri/）有没有默认的index.html文件，如果还没有，最后返回根目录下的index.html（即上面的/index.html）。其实在这里，我们想要的就是让它无脑返回根目录下的index.html（因为我们只有这个可访问文件）

history模式部署时需要改动的地方

如果是部署在根目录下，只需要改nginx配置如下即可，前端配置无需修改

location / {
	try_files $uri $uri/ /index.html;
}

如果是部署在二级目录下(如部署在/wj目录)，修改内容如下

nginx配置

 # nginx 修改后配置
location /wj {
  try_files $uri $uri/ /wj/index.html;
}

vue-router配置

const router = createRouter({
    history: createWebHistory('/wj/')
})

vite.config配置

// vite.config.js
{
	base: '/wj/'
    // 其他代码省略
}

# vite配置terser,压缩代码及丢弃console

# 模式

# 环境变量

# .env 文件

# vite.config.js

# Vite常用基本配置

# route

# 在vue3.0中取消了vue2.0的部分api，新增的两个API useRouter,useRoute。

# 使用 Router History

# nginx.conf

# vite config

# 使用root还是alias

# nginx 相关配置

# history模式部署时需要改动的地方