Vue-cli + webpack-simple构建时资源文件缺失问题求助

你遇到的问题根源在于webpack-simple的构建逻辑：默认情况下src文件夹不会被直接复制到构建后的dist目录，而你在index.html里写的./src/assets/main.css是源码路径，构建完成后浏览器根本找不到这个文件。下面给你两种实用的解决办法，优先推荐第一种更贴合webpack工作流的方式：

方法一：通过webpack引入CSS（推荐） #

webpack的核心就是处理模块依赖，直接在入口文件里导入CSS，让webpack帮你打包处理：

1. 打开src/main.js，在顶部添加这行代码：

import './assets/main.css'

这样webpack会自动把CSS内容打包到dist/build.js里，页面加载时会自动注入样式。

如果你希望生成单独的CSS文件（而非打包进JS），可以额外配置插件：

2. 安装适配webpack 3.x的extract-text-webpack-plugin（webpack-simple默认用webpack 3，别装最新版）：

npm install extract-text-webpack-plugin@3 --save-dev

3. 修改webpack.config.js：
   • 先在文件顶部引入插件：

   const ExtractTextPlugin = require('extract-text-webpack-plugin')
   

   • 找到module.rules里的CSS规则，替换成下面的代码：

   {
     test: /\.css$/,
     use: ExtractTextPlugin.extract({
       use: 'css-loader',
       fallback: 'vue-style-loader'
     })
   },
   

   • 在plugins数组里添加插件实例：

   new ExtractTextPlugin('main.css')
   

4. 最后修改index.html里的link路径：

<link rel="stylesheet" href="./main.css">

重新构建后，dist目录会生成main.css，浏览器就能正确加载了。

方法二：复制assets文件夹到dist目录 #

如果你坚持要在index.html里直接引入CSS，可以用插件把src/assets复制到dist：

1. 安装适配的copy-webpack-plugin：

npm install copy-webpack-plugin@5 --save-dev

2. 修改webpack.config.js：
   • 顶部引入插件：

   const CopyWebpackPlugin = require('copy-webpack-plugin')
   

   • 在plugins数组里添加：

   new CopyWebpackPlugin([
     { from: './src/assets', to: 'assets' }
   ])
   

3. 修改index.html里的link路径：

<link rel="stylesheet" href="./assets/main.css">

这样构建时，src/assets里的所有文件都会被复制到dist/assets，浏览器就能找到你的CSS了。

为什么原来的路径不行？ #

webpack-simple构建后，只会把处理后的产物放到dist目录，src文件夹不会被包含进去。你原来写的./src/assets/main.css是源码目录的路径，在生产环境的dist文件夹下根本不存在，所以浏览器会报资源缺失的错误。

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