集成后端框架

如果你是在构建一个纯静态应用 （就是说和后端 API 服务是分开部署的），那么你可能就不需要编辑 config/index.js 文件。但如果你想和后端框架集成部署的话（如 Rails、Django 和 Laravel 等已经自带其自己的架构），你就需要编辑 config/index.js 页面来让生成前端的资源放到后端的框架中去。

让我们看下 config/index.js 文件的默认配置：

var path = require('path')

module.exports = {
  build: {
    index: path.resolve(__dirname, 'dist/index.html'),
    assetsRoot: path.resolve(__dirname, 'dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true
  },
  dev: {
    port: 8080,
    proxyTable: {}
  }
}

在 build 部分，我们有如下可选项：

build.index

这里必须是你本地文件系统的绝对路径

这是包含注入资源网址的 index.html 文件被生成的的目录。

如果你在后端框架上使用这个模板，你可以编辑 index.html ，从而使其指向后端应用呈现的视图文件的路径。例如，在 Rails 应用中，设置为 app/views/layouts/application.html.erb，或者在 Laravel 应用中设置为 resources/views/index.blade.php 。

build.assetsRoot

这里必须是你本地文件系统的绝对路径

这里指向的是包含应用生成的所有静态资源根目录。例如，Rails 或 Laravel 中的 public/ 。

build.assetsSubDirectory

在 build.assetsRoot 的目录下插入 webpack 生成的静态资源，这样就不会和其他已经放在 build.assetsRoot 目录下的其他文件混合了。例如，如果 build.assetsRoot 设置为 /path/to/dist ，build.assetsSubDirectory 设置为 static ，那么所有的 Webpack 生成的静态资源会放到 path/to/dist/static 目录中。

每次编译前该目录会被清空，所以这里只包含编译后的静态资源。

static/ 目录下文件在编译时会被直接拷贝到这个目录中。 这意味着，如果你改变了这个前缀，那所有指向 static/ 内文件的绝对路径也都需要改变。详情请看 处理静态资源获得更多介绍。

build.assetsPublicPath

这是 build.assetsRoot 通过 HTTP 静态资源路径。 大多情况下（如果项目有自己的域名），就设置为根目录(/) 。 只有当后台框架提供的静态资源带有目录前缀的时候，才需要改变。在内部，这个路径将会传递给 webpack 的 output.publicPath。

build.productionSourceMap

是否为生产环境生成 Source Maps。

dev.port

指定要监听的本地开发服务端的端口。

dev.proxyTable

定义本地开发服务端的请求代理规则。详情请看 开发过程中 API 请求代理 获得更多细节。