如何配置vue-cli将构建后的项目文件输出到指定目录？

我太懂这种“旧经验突然失效”的挫败感了！大概8-9个月前用老版vue-cli（那种基于Webpack、能直接摸到/build目录的版本）时，确实可以直接修改/build/webpack.dev.conf.js这类配置文件，让npm run build的产物直接输出到Flask项目的对应目录里。但新版的Vue CLI（也就是@vue/cli）把Webpack的配置做了一层抽象封装，不再暴露原来的/build目录结构了——不过别担心，咱们照样能实现相同的需求，只是换了个配置入口而已。

下面是具体的实现步骤：

1. 找到/创建vue.config.js #

新版Vue CLI项目的根目录下应该有个vue.config.js文件（如果没有，直接在项目根目录新建一个就行），这是现在自定义所有构建配置的核心入口。

2. 配置输出目录 #

在vue.config.js里添加outputDir和indexPath两个配置项，直接指定打包产物要输出到Flask项目的对应位置。举个例子，如果你的Flask项目结构是这样的：

my-flask-app/
├── static/
│   ├── js/
│   ├── css/
│   └── assets/
├── templates/
│   └── index.html
└── app.py

而你的Vue项目和Flask项目是同级目录的话，就可以这么写：

module.exports = {
  // 把JS、CSS、静态资源打包到Flask的static目录
  outputDir: '../my-flask-app/static',
  // 把生成的index.html放到Flask的templates目录
  indexPath: '../my-flask-app/templates/index.html'
}

注意路径要根据你两个项目的实际相对位置调整，别写错了。

3. 调整静态资源引用路径（可选） #

如果你的Vue项目里用到了图片、字体这类静态资源，打包后可能会出现路径错误的问题。这时候可以加上publicPath配置，确保资源的引用路径符合Flask的静态资源规则：

module.exports = {
  outputDir: '../my-flask-app/static',
  indexPath: '../my-flask-app/templates/index.html',
  // 设置静态资源的基础路径，对应Flask的/static/路由
  publicPath: '/static/'
}

4. 执行打包 #

现在运行npm run build，Vue项目的构建产物就会自动输出到你指定的Flask目录里了，再也不用手动拷贝文件啦！

如果之后你需要更复杂的Webpack自定义配置（比如添加特定插件、调整loader规则），还可以用configureWebpack或者chainWebpack选项来深入修改底层配置，但对于你现在的需求来说，上面的基础配置已经完全够用了。

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