如何构建单文件夹Vue.js项目及修改Webpack打包文件路径至根目录

嘿，我来帮你搞定这两个Vue项目打包的问题，一步步来哈～

如果你是新建项目，可以这么操作：

• 用你习惯的vue init webpack my-project命令创建项目，跟着引导完成基础配置（比如是否用路由、ESLint这些，按需选择就行）
• 项目创建好后，按照下面问题2里的配置修改步骤，调整config/index.js和build/webpack.prod.conf.js的相关参数，之后执行npm run build，就能得到所有文件都在dist根目录的打包结果啦。

如果是已有项目，直接看问题2的配置修改方案就行，本质上是一样的。

完全可行！结合你给出的config/index.js配置，咱们只需要再调整几处配置就能实现：

1. 完善config/index.js的build配置 #

你已经把assetsSubDirectory设为''了，这步很关键，确保不会生成子目录。再确认其他几个参数：

const path = require('path')
module.exports = {
  build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: '', // 保持为空，不生成子目录
    assetsPublicPath: '', // 设为空或者'/'，确保资源引用路径正确
    // ... 其他配置（比如Source Map）保持默认即可
  }
  // ... dev配置不用动
}

2. 修改build/webpack.prod.conf.js的输出配置 #

打开这个文件，找到以下几处并修改：

• 修改JS文件输出路径：找到output配置块，把filename和chunkFilename里的js/前缀去掉：

output: {
  path: config.build.assetsRoot,
  filename: '[name].[chunkhash].js', // 原先是'js/[name].[chunkhash].js'
  chunkFilename: '[id].[chunkhash].js' // 原先是'js/[id].[chunkhash].js'
}

• 修改CSS文件输出路径：找到ExtractTextPlugin的配置，把filename里的css/前缀去掉：

new ExtractTextPlugin({
  filename: '[name].[contenthash].css', // 原先是'css/[name].[contenthash].css'
  // ... 其他配置保持不变
})

3. 检查并重新打包 #

• 确认没有其他手动设置的资源路径（比如你自己在代码里写的静态资源引用），确保路径是根目录相对路径
• 执行npm run build，打开dist目录看看——index.html、所有JS和CSS文件都应该直接放在dist根目录里啦！

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