Vue3打包 和 vite.config.js配置（十二）


文章目录

    • 参考
    • 问题描述
    • 解决办法
      • 项目上下文的处理（vite.config.js 的base属性）
      • 执行`npm run build` 报错？
      • 静态资源文件的处理
        • html 引用public目录下的资源文件
        • Vue 使用相对路径引入资源
        • CSS 使用相对路径 引入资源
    • 打包案例说明

参考

  1. vite.config.js 配置文件github
  2. Vue3 处理静态资源 官网

问题描述

  1. 在给同事介绍Vue3的时候，他问我静态资源打包放到 服务器上的时候（后台工程包含工程名），如果直接使用 “@” 作为根目录肯定会报错，我突发发现我还没有尝试用Vue3 打包，工程上下文还不清楚，于是自己尝试，发现打包不成功，提示找不到资源文件
  2. 之前开发引入的目录都是 “@”作为根目录文件夹，但实际打包之后根本就不存在，只有“_assets”目录，导致代码中以@开头的资源文件找不到

解决办法

项目上下文的处理（vite.config.js 的base属性）

详情参考 vite.config.js 配置文件github

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const path = require('path')
// vite.config.js # or vite.config.ts

console.log(path.resolve(__dirname, './src'))

module.exports = {<!-- -->
   /**
   * 在生产中服务时的基本公共路径。
   * @default '/'
   */
  base: '/huangbiao',
  /**
   * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
   * @default 'dist'
   */
  outDir: 'target',
  port: 3000,
  // 是否自动在浏览器打开
  open: true,
  // 是否开启 https
  https: false,
  // 服务端渲染
  ssr: false,
  // 引入第三方的配置
  optimizeDeps: {<!-- -->
    include: ["moment", "echarts", "axios", "mockjs"]
  },
  alias: {<!-- -->
    // 键必须以斜线开始和结束
    '/@/': path.resolve(__dirname, './src')
    // '/@components/': path.resolve(__dirname, './src/components')
  },
  proxy: {<!-- -->
    // 如果是 /lsbdb 打头，则访问地址如下
    '/lsbdb': 'http://10.192.195.96:8087',
    // 如果是 /lsbdb 打头，则访问地址如下
    // '/lsbdb': {<!-- -->
    //   target: 'http://10.192.195.96:8087/',
    //   changeOrigin: true,
    //   // rewrite: path => path.replace(/^\/lsbdb/, '')
    // }
  }
}

与“根”相关的目录，构建输出将放在其中。

执行npm run build 报错？

官方提示是可以手动删除打包文件夹，然后重新创建，但自己验证如果不手动删除目标文件，打包会提示报错。

静态资源文件的处理

查看了 VueCli 官网，Vue3 处理静态资源 官网，提示

静态资源可以通过两种方式进行处理：
在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

于是自己将 html 和 CSS 资源文件的引入全部改为了相对路径，打包成功，如图
在这里插入图片描述

html 引用public目录下的资源文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 使用vite 转换引用 -->
  <script src="/asserts/js/echarts.min.js"></script>
  <script src="/asserts/js/china.js"></script>
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

Vue 使用相对路径引入资源

1
<img src="../../assets/images/error404.png" alt="">

CSS 使用相对路径 引入资源

1
2
3
4
5
6
7
.ageStatics-bg {<!-- -->
  background-image: url(../../../assets/images/screen/circle-charg-bg.png);
  background-size: cover;
  height: 1.6rem;
  width: 1.6rem;
  margin: 0 auto;
}

打包案例说明

在这里插入图片描述
备注说明：

  1. 目录结构中并没有 配置文件中描述的 “@” 目录，对静态资源文件查找比较重要
  2. 如果要跟后台工程名关联， 在vite.config.js 中配置 “base” 属性即可
  3. 项目中的 public 目录中的文件会全部拷贝到 打包文件中
  4. outDir文件夹定义了打包文件的输出