vue3 + vite2 打包部署后 404 解决方案

404现象解析

如果在开发环境没问题，但是部署后（部署到服务器的非根目录的情况时）出现很多相关的js，css文件报404，那么可以看一下index.html中的资源引用，如果都是/assets开头，那么这个时候就需要修改配置文件，重新打包了。

解决办法

在vue2中我们在config/index.js文件中配置了 assetsPublicPath:‘./’，同理，vue3中也需要配置这个属性，vue3中vite生成的项目，没有config文件夹，需要在vite.config.js中配置base属性。

代码如下

export default defineConfig({
    base: "./", //等同于  assetsPublicPath :'./'
    plugins: [
        vue(),
        styleImport({
            resolves: [VantResolve()],
        }),
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
            "view": path.resolve(__dirname, "src/view"),
            "components": path.resolve(__dirname, "src/components"),
            "assets": path.resolve(__dirname, "src/assets"),
            "store": path.resolve(__dirname, "src/store"),
            "mixins": path.resolve(__dirname, "src/mixins"),
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "./src/assets/styles/common.scss";'
            }
        }
    },
    server: {
        host: "0.0.0.0",
    },
});