webpack部署在子路径时如何配置js/css静态资源输出路径

要实现给静态资源添加统一的子路径前缀，修改webpack配置中的publicPath参数即可，不同场景下的配置方式如下：

原生webpack配置 #

直接在webpack.config.js中添加output.publicPath配置：

module.exports = {
  output: {
    // 填写你部署的子路径，注意末尾要加斜杠
    publicPath: '/myservice/'
  },
  // 其余配置保持不变
}

常用的html-webpack-plugin会自动继承该配置，打包后生成的html文件里的静态资源路径会自动加上前缀，效果如下：

<link href=/myservice/css/app.ff6d5467.css rel=preload as=style>
<link href=/myservice/js/app.a9f1ae4f.js rel=preload as=script>

上层脚手架适配配置 #

如果使用框架封装的脚手架，需要额外配置对应框架的参数：

• Vue CLI 2/3+：修改vue.config.js中的publicPath字段

  // vue.config.js
  module.exports = {
    // 可区分生产/开发环境配置不同路径
    publicPath: process.env.NODE_ENV === 'production' ? '/myservice/' : '/'
  }
  

• Create React App：修改项目根目录.env文件中的PUBLIC_URL变量

  PUBLIC_URL=/myservice
  

多环境动态适配技巧 #

如果需要同时适配根路径部署和子路径部署，可将publicPath设置为环境变量，打包时通过参数传入即可：

// webpack.config.js
module.exports = {
  output: {
    publicPath: process.env.ASSET_PREFIX || '/'
  }
}

打包时执行对应命令指定前缀：

# Linux/Mac环境
ASSET_PREFIX=/myservice/ npm run build
# Windows cmd环境
set ASSET_PREFIX=/myservice/&&npm run build

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