assetsDir not relative to outputDir

Version

3.0.0-rc.5

Reproduction link

https://github.com/androiddrew/flaskme

Steps to reproduce

Create a project with the following structure:

top_level/
├── backend
│   ├── static
│   └── templates
└── vue_project
    ├── dist
    ├── public
    └── src

With vue.config.js set to :

const path = require("path");

module.exports = {
  outputDir: path.resolve('../../backend/static'), 
  assetsDir: './assets',
  baseUrl: '/',
  runtimeCompiler: undefined,
  productionSourceMap: undefined,
  parallel: undefined,
  css: undefined,
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        args[0].filename = path.resolve('../backend/templates/index.html');
        return args;
      });
  },
}

Build your vue_project. The result is creates an index.html with the correct paths in the href tags, but the static assets are placed relative to the default folder NOT the outputDir defined in your config file.

Setting the vue.config file to:

const path = require("path");

module.exports = {
  outputDir: path.resolve('../../backend/static'),
  assetsDir: '../../backend/static/assets',
  baseUrl: '/',
  runtimeCompiler: undefined,
  productionSourceMap: undefined,
  parallel: undefined,
  css: undefined,
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        args[0].filename = path.resolve('../backend/templates/index.html');
        return args;
      });
  },
}

Will place the static assets in the defined directory however the index.html href values are injected with the assetsDir path.

<link as=script href=/../../backend/static/assets/js/chunk-vendors.fb29d323.js rel=preload>

What is expected?

The expected behavior should be to have the assetsDir be a relative path from your outputDir. If the outputDir is undefined then assetsDir is a relative path from the default assetsDir

What is actually happening?

The assetsDir is being used for two separate items. 1. It is being used as the outputDir for the assets. 2. It is used in the url-loaders that inject your src/href/etc. values.

---

This directory setup above is for a Vuejs SPA client and a Python backend. The built files should be served by the backend, which necessitates their placement in the backend static and template folders. It is part of a python application that will be distributed as a python package.

[cottrell]

img paths are also wrong in the built files. They are not relative to anything so you can not move.

[ghenry]

I was advised to use baseurl and adjust in my router config.