上节文章中，我们从零开始搭建起vue3+vite项目，本篇主要介绍vite的配置

当使用 Vite 构建项目后，需要通过局域网中的电脑或手机访问服务调试时，发现通过 IP + 端口无法访问，
正常启动项目会出现以下的情况
yarn dev
image.png
Network: use --host to expose
这是由于尝试访问后，发现找不到这个服务，原因是 没有将服务暴露在网络中。

通过查询文档后，有三种方法可以解决此问题

  1. 修改 vite.config.js 配置

在根目录下的 vite.config.js 文件中添加以下内容

  1. import vue from '@vitejs/plugin-vue'
  2. /**
  3.  * https://vitejs.dev/config/
  4.  * @type {import('vite').UserConfig}
  5.  */
  6. export default {
  7.   plugins: [vue()],
  8.   server: {
  9.     host: '0.0.0.0'    // ← 新增内容 ←
  10.   }
  11. }
  1. 通过 Vite CLI 配置

执行 npx vite —host 0.0.0.0 命令后，就可以通过 http://10.56.116.128:3000/ 访问了。

  1. 修改 npm 脚本

修改 package.json 文件中 scripts 节点下的脚本，如下：

  1. "scripts": {
  2.   "dev": "vite --host 0.0.0.0",
  3.   "build": "vite build",
  4.   "serve": "vite preview --host 0.0.0.0"
  5. }

vite.config.js基本配置

当以命令行方式运行 vite 时，Vite 会自动解析 项目根目录 下名为 vite.config.js 的文件

  1. // defineConfig 工具函数
  2. import { defineConfig } from 'vite';
  4. import vue from '@vitejs/plugin-vue';
  5. // 主要用于alias文件路径别名
  6. import { resolve } from "path";
  8. function pathResolve(dir) {
  9.   return resolve(__dirname, ".", dir);
  10. }
  12. export default defineConfig({
  13.   // 这里是将src目录配置别名为 /@ 方便在项目中导入src目录下的文件
  14.   resolve: {
  15.     alias: {
  16.       "@": pathResolve("src"),
  17.     }
  18.   },
  20.   // 打包配置
  21.   build: {
  22.     target: 'modules',
  23.     outDir: 'dist', //指定输出路径
  24.     assetsDir: 'assets', // 指定生成静态资源的存放路径
  25.     minify: 'terser' // 混淆器，terser构建后文件体积更小
  26.   },
  27.   // 本地运行配置，及反向代理配置
  28.   server: {
  29.     cors: true, // 默认启用并允许任何源
  30.     open: true, // 在服务器启动时自动在浏览器中打开应用程序
  31.     port: 8080,
  33.     //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
  34.     // proxy: {
  35.     //     '/api': {
  36.     //         target: 'http://192.168.99.223:3000',   //代理接口
  37.     //         changeOrigin: true,
  38.     //         rewrite: (path) => path.replace(/^\/api/, '')
  39.     //   }
  40.     // }
  41.   }
  43. })

更多参考https://cn.vitejs.dev/config/