Vue2与Laravel8项目如何设置兼容开发生产双环境的统一资源URL路径

方案1：Webpack别名配置（适用于Laravel Mix构建场景） #

• 修改项目根目录下的webpack.mix.js，添加别名和公共路径适配规则：

const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    // 自动适配开发/生产环境的资源根路径
    .setResourceRoot(process.env.NODE_ENV === 'production' ? '/' : 'http://localhost:8080/')
    .webpackConfig({
        resolve: {
            alias: {
                // 统一映射图片资源目录，可根据实际存放路径调整
                '@images': path.resolve(__dirname, 'public/images'),
            }
        }
    });

• CSS中统一使用别名路径引用资源，无需区分环境：

background: url("~@images/image.png");

~前缀用于告知webpack该路径为别名路径，会自动根据环境编译为对应可访问的路径。

方案2：Vite别名配置（适用于Laravel 9+ 默认Vite构建场景） #

• 修改项目根目录下的vite.config.js，添加别名配置：

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

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue(),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/js'),
            // 映射图片资源目录，可根据实际存放路径调整
            '@images': path.resolve(__dirname, 'public/images'),
        }
    }
});

• CSS中统一用别名路径引用即可：

background: url("~@images/image.png");

方案3：无别名极简适配 #

如果不想修改构建配置，直接统一使用/images/image.png格式的路径，注意两点即可：

• 所有静态资源存放在public/images目录下
• 不要在路径中添加/public前缀，Laravel的web根目录默认指向public文件夹，加前缀会导致生产环境404
• 开发环境运行npm run hot时，确保.env中MIX_ASSET_URL（Mix场景）或VITE_ASSET_URL（Vite场景）留空即可自动适配

内容的提问来源于stack exchange，提问作者Artur Müller Romanov