.env 环境变量包含\${ENV_APP_URL}，结果编译后modern 代码结果不对

[bluepeople1]

Version

5.0.0-beta.0

Environment info

Environment Info:

  System:
    OS: macOS 11.5.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 7.20.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Edge: Not Found
    Firefox: 88.0.1
    Safari: 14.1.2
  npmPackages:
    @ant-design/icons-vue:  2.0.0 
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.0.6 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  5.0.0-beta.3 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  5.0.0-beta.3 
    @vue/cli-plugin-babel: ^5.0.0-beta.0.2 => 5.0.0-beta.3 
    @vue/cli-plugin-eslint: ^5.0.0-beta.0.2 => 5.0.0-beta.3 
    @vue/cli-plugin-router:  undefined (5.0.0-beta.3)
    @vue/cli-plugin-vuex:  undefined (5.0.0-beta.3)
    @vue/cli-service: ^5.0.0-beta.0.2 => 5.0.0-beta.3 
    @vue/cli-shared-utils:  5.0.0-beta.3 
    @vue/compiler-core:  3.2.4 
    @vue/compiler-dom:  3.2.4 
    @vue/compiler-sfc: ^3.0.11 => 3.2.4 
    @vue/compiler-ssr:  3.2.4 
    @vue/component-compiler-utils:  3.2.2 
    @vue/shared:  3.2.4 
    @vue/web-component-wrapper:  1.3.0 
    ant-design-vue:  1.7.7 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    eslint-plugin-vue: ^7.6.0 => 7.16.0 
    single-spa-vue: ^1.10.1 => 1.10.1 
    swiper/vue:  undefined ()
    vue: ^2.6.12 => 2.6.14 
    vue-awesome-swiper: ^4.1.1 => 4.1.1 (3.1.3)
    vue-bus: ^1.2.1 => 1.2.1 
    vue-clamp:  0.3.2 
    vue-cli-plugin-single-spa: ^1.3.2 => 1.3.2 
    vue-cropper:  0.5.6 
    vue-eslint-parser:  7.10.0 
    vue-hot-reload-api:  2.3.4 
    vue-keep-ratio:  1.3.2 
    vue-loader:  16.5.0 (15.9.8)
    vue-quill-editor:  3.0.6 
    vue-ref:  2.0.0 (1.0.6)
    vue-resize-text: ^0.1.1 => 0.1.1 
    vue-router: ^3.4.9 => 3.5.2 
    vue-seamless-scroll: ^1.1.23 => 1.1.23 
    vue-style-loader:  4.1.3 
    vue-template-compiler: ^2.6.12 => 2.6.14 
    vue-template-es2015-compiler:  1.9.1 
    vuedraggable: ^2.24.3 => 2.24.3 
    vuex: ^3.6.0 => 3.6.2 
    vuex-persistedstate: ^3.1.0 => 3.2.1 
  npmGlobalPackages:
    @vue/cli: 5.0.0-beta.0

Steps to reproduce

1.vue.config.js 中设置publicPath:process.env.VUE_APP_URL 2..env文件中 VUE_APP_URL = '\${ENV_APP_URL}

What is expected?

What is actually happening?

---

1.@vue/cli-service/lib/commands/build/index.js中以下代码的问题，新起spawn中继承了主进程中process.env变量 process.env.VUE_CLI_MODERN_MODE = true if (!process.env.VUE_CLI_MODERN_BUILD) { // main-process for legacy build const legacyBuildArgs = { ...args, moduleBuild: false, keepAlive: true } await build(legacyBuildArgs, api, options)

  // spawn sub-process of self for modern build
  const cliBin = require('path').resolve(__dirname, '../../../bin/vue-cli-service.js')
  process.env = {}
  await execa('node', [cliBin, 'build', ...rawArgs], {
    stdio: 'inherit',
    env: {
      VUE_CLI_MODERN_BUILD: true
    }
  })
} else {
  // sub-process for modern build
  const moduleBuildArgs = { ...args, moduleBuild: true, clean: false }
  await build(moduleBuildArgs, api, options)
}

2.dotenv-expand/lib/main.js 中

for (var configKey in config.parsed) { var value = environment.hasOwnProperty(configKey) ? environment[configKey] : config.parsed[configKey]

config.parsed[configKey] = interpolate(value)

} 中环境变量继承主进程process.env导致modern代码出错

[onemantooo]

Is there any workaround? I faced this issue too. Explanation: If you use modern build and use .env variables with dotenv-expand and have '$' sign in your vars with backslash

VUE_APP_BASE_URL=\$BASE_URL

First (legacy build) will be ok, but modern will get all variables with '$' - empty, cause on second run it identifies it as a reference to another variable which doesn't exist.

[screetBloom]

that works

// .env
VUE_APP_URL = '\${ENV_APP_URL}'

module.exports = {
  publicPath: process.env.VUE_APP_URL,
}

@bluepeople1 @onemantooo

[onemantooo]

VUE_APP_URL = '\${ENV_APP_URL}'

Not worked for me. Still getting empty strings in modern build js code.

[onemantooo]

Solved only by extra dirty hack:

// .env
VUE_APP_BASE_URL=#DOLLAR_FIXER#DOCKER_ENV_BASE_URL

// vue.config.js
  if (process.env.NODE_ENV == "production") {
    console.log("Hacking #DOLLAR_FIXER#");
    plugins.push(
      new ReplaceInFileWebpackPlugin([
        {
          dir: "dist",
          test: [/\.js$/, /\.html$/],
          rules: [
            {
              search: /#DOLLAR_FIXER#/gi,
              replace: "$",
            },
          ],
        },
      ])
    );
  }