使用Webpack构建的Vue生产环境站点显示空白页面求助

问题背景 #

开发基于Webpack的Vue项目时，开发阶段用以下命令可正常运行：

nodemon src/index.js
webpack --mode development --watch

执行生产构建命令：

webpack --mode production

生成index.html和bundle.js后，打开页面却显示空白。

附上当前的webpack.config.js配置：

const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/app/index.js',
    output: {
        path: __dirname + '/src/public/js',
        //path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                  'vue-style-loader',
                  'css-loader',
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                      outputPath: 'images',
                      name: '/images/[name].[ext]'
                    },
                  },
                ],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: __dirname + '/src/public/index.html', // Use your custom template if needed
        }),
    ]
}

核心问题与修复方案 #

1. 输出路径混乱（最关键问题） #

当前output.path设为src/public/js，会导致：

• bundle.js被打包到src/public/js目录
• HtmlWebpackPlugin生成的index.html直接放在项目根目录
• index.html里引用bundle.js的路径是js/bundle.js，但实际文件在src/public/js/bundle.js，路径不匹配导致脚本加载失败，页面空白。

修复：
启用注释掉的dist目录作为统一输出路径：

output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
},

这样所有构建产物（index.html、bundle.js、图片资源）都会生成在dist目录，引用路径自动正确。

2. 资源路径配置错误 #

file-loader的name配置开头加了斜杠，会生成绝对路径，在共享主机环境下可能导致图片等资源加载失败。

修复：
去掉name开头的斜杠，改为相对路径：

options: {
  outputPath: 'images',
  name: 'images/[name].[ext]'
},

3. 生产环境样式加载优化 #

vue-style-loader适合开发环境，生产环境建议用mini-css-extract-plugin分离CSS文件，避免样式加载异常：

步骤：

1. 安装依赖：

npm install mini-css-extract-plugin --save-dev

2. 修改webpack配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// ... 其他配置不变

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
              process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'vue-style-loader',
              'css-loader',
            ]
        },
        // ... 其他规则保持不变
    ]
},
plugins: [
    // ... 已有插件不变
    new MiniCssExtractPlugin({
        filename: 'css/[name].css'
    })
]

4. 确认Vue实例挂载正确 #

检查入口文件src/app/index.js是否正确挂载Vue实例：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

同时确保模板src/public/index.html里存在挂载节点：

<div id="app"></div>

5. 浏览器控制台排查 #

打开F12开发者工具：

• 查看控制台是否有报错（比如Vue未加载、挂载节点不存在）
• 切换到网络标签，检查bundle.js和其他资源是否加载成功，路径是否正确

验证流程 #

1. 修改配置后重新执行生产构建：

webpack --mode production

2. 将dist目录下所有文件上传到共享主机的网站根目录
3. 访问网站确认页面正常显示

内容的提问来源于stack exchange，提问作者Corboss