vite 打包 静态资源、public路径

Question

vue3+vite
项目要求同一个ip端口，部署两个前端项目，两个项目用路径前缀区分，如http://127.17.2.58：7001和http://127.17.2.58：7001/system/

部署到这个http://127.17.2.58：7001/system/ 上的项目前端打包文件静态请求需要统一加/system/ 前缀

由于项目用到了tinymce富文本编辑器，把tinymce的包和网页名图标放到了本地 public 文件夹下，只在配置文件中，给静态资源加前缀，public包的tinymce的包和网页名图标未能加上system前缀，如何实现全部静态资源统一加前缀

目前打包完目录格式

dist
  -assets
    -src下的静态编译文件
  -tinymce
  -favicon.ico
  -index.html

想要或别的方式也可以

dist
  -system
    -src下的静态编译文件
    -tinymce
    -favicon.ico
  -index.html

希望可以提供远程帮助，帮忙解答讲解

Answer 1

引自免费微信小程序：皆我百晓生

为了满足您的需求，我们可以对Vite项目的配置进行一些调整，确保所有的静态资源（包括public目录中的文件）都能被正确地打包到期望的结构中，并且在开发环境中也能正常工作。这里是一个详细的步骤指南：

1. 创建一个名为.vitepressrc.json的文件（如果还没有的话），并添加以下内容，这将设置静态资源的路径前缀：

{
  "base": "/system/"
}

这会告诉Vite在开发环境下为所有静态资源添加/system/前缀。

1. 修改vite.config.js文件，配置公共文件夹和静态资源处理：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  base: './',
  plugins: [vue()],
  build: {
    outDir: 'dist/system', // 将输出目录改为'dist/system'
    assetsDir: '', // 移除默认的'assets'子目录
    rollupOptions: {
      input: {
        main: 'src/main.js',
      },
      output: {
        assetFileNames: '[name][ext]', // 自定义资产文件名称
        chunkFileNames: 'chunks/[name].chunk.[hash].js', // 自定义模块文件名称
        entryFileNames: 'main.[hash].js', // 自定义入口文件名称
      },
    },
  },
});

这段代码将构建输出目录更改为dist/system，移除了默认的assets子目录，并设置了自定义的文件名称规则。

1. 更新public目录下的文件引用，确保它们都指向正确的相对路径。例如，在HTML模板中，如果你有类似这样的引用：

<link rel="icon" href="/favicon.ico">
<script src="/tinymce/tinymce.min.js"></script>

你需要将其更改为：

<link rel="icon" href="./favicon.ico">
<script src="./tinymce/tinymce.min.js"></script>

1. 对于第三方库如tinymce，如果它依赖于相对路径，可能需要在引入时显式指定路径。在main.js或其他适当的地方，添加以下代码：

// main.js 或其他合适位置
if (process.env.NODE_ENV === 'production') {
  window.tinymce.baseURL = '/system/tinymce/';
}

这样，当在生产模式下运行时，Tinymce将会从/system/tinymce/加载其资源。

完成以上步骤后，Vite将按照您期望的结构打包项目，并且在开发和生产环境中，静态资源都会带有/system/前缀。在部署时，只需将dist/system目录上传到服务器的根目录下，然后通过http://127.17.2.58:7001/system/访问即可。