search

vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.33k forks source link

BASE_URL returning undefined in /dist/index.html #5281

Closed TheBraveBunny closed 4 years ago

TheBraveBunny commented 4 years ago

Version

4.2.3

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-4720HQ CPU @ 2.60GHz
  Binaries:
    Node: 12.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.12.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.1.2
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli: ^4.2.3 => 4.2.3
    @vue/cli-overlay:  4.1.2
    @vue/cli-plugin-babel: ^4.1.0 => 4.1.2
    @vue/cli-plugin-eslint: ^4.1.0 => 4.1.2
    @vue/cli-plugin-router: ^4.1.2 => 4.1.2
    @vue/cli-plugin-vuex: ^4.1.2 => 4.1.2
    @vue/cli-service: ^4.1.0 => 4.1.2
    @vue/cli-shared-utils:  4.1.2 (4.2.3)
    @vue/cli-ui:  4.2.3
    @vue/cli-ui-addon-webpack:  4.2.3
    @vue/cli-ui-addon-widgets:  4.2.3
    @vue/component-compiler-utils:  3.1.1
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3
    typescript:  3.7.5
    vue: ^2.6.10 => 2.6.11
    vue-cli-plugin-apollo:  0.21.3
    vue-cli-plugin-vuetify: ^2.0.3 => 2.0.3
    vue-displace:  0.2.7
    vue-element-resize-detector:  1.0.5
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.4
    vue-jscodeshift-adapter:  2.0.3
    vue-loader:  15.8.3
    vue-responsive-dash: ^0.3.15 => 0.3.15
    vue-router: ^3.1.6 => 3.1.6
    vue-sfc-descriptor-to-string:  1.0.0
    vue-slicksort: ^1.1.3 => 1.1.3
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
    vuetify: ^2.2.17 => 2.2.17
    vuetify-loader: ^1.3.0 => 1.4.3
    vuex: ^3.1.3 => 3.1.3
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1) Have working Vue project. 2) Run npm run build 3) Open /dist/index.html file 4) Be sad because every href starts with "/undefined/..." Example: <link rel="icon" href="<%= BASE_URL %>favicon.ico"> becomes <link rel=icon href="/undefined/favicon.ico">

What is expected?

base_url should be my project url instead of undefined

What is actually happening?

my hrefs in my dist/index.html file all start with undefined instead of my project name

I've made a Vue project using the Vue ui, where I can serve and then see my app working just fine. Running npm run build generates a dist file and the appropriate files/folders it seems. I'm trying to build it so I can deploy it to Firebase, but I was getting errors since everything was undefined.

vue.config.js

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  devServer: {
        proxy: 'https://myredactedprojectname.com/',
    },
  publicPath: process.env.NODE_ENV === 'production'
    ? '/' + process.env.CI_PROJECT_NAME + '/'
    : '/'
}

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <base href="/" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>soa</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but soa doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

dist/index.html

<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><base href=/ ><link rel=icon href="/undefined/favicon.ico"><title>soa</title><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css><link href="/undefined/css/chunk-02393c0e.868814f6.css" rel=prefetch><link href="/undefined/css/chunk-0413c1cf.da33aaeb.css" rel=prefetch><link href="/undefined/css/chunk-05af17cb.0670aa22.css" rel=prefetch><link href="/undefined/css/chunk-05c2d357.0670aa22.css" rel=prefetch><link href="/undefined/css/chunk-05f9ac48.0670aa22.css" rel=prefetch><link href="/undefined/css/chunk-061bbc7c.0670aa22.css" rel=prefetch><link href="/undefined/css/chunk-0c3f6c05.fa43d5a7.css" rel=prefetch><link href="/undefined/css/chunk-0ffc1848.0cf83054.css" rel=prefetch><link href="/undefined/css/chunk-28537b2e.f613719f.css" rel=prefetch><link href="/undefined/css/chunk-2991328e.53d7c3bd.css" rel=prefetch><link href="/undefined/css/chunk-3451d3f0.0cf83054.css" rel=prefetch><link href="/undefined/css/chunk-50451b64.20012414.css" rel=prefetch><link href="/undefined/css/chunk-579e1ea3.36ca82f6.css" rel=prefetch><link href="/undefined/css/chunk-774d451a.bbdf16ed.css" rel=prefetch><link href="/undefined/css/chunk-796d4363.0cf83054.css" rel=prefetch><link href="/undefined/css/chunk-889ba836.0cf83054.css" rel=prefetch><link href="/undefined/css/chunk-8b217ef2.0670aa22.css" rel=prefetch><link href="/undefined/css/chunk-a2794958.469377bf.css" rel=prefetch><link href="/undefined/css/chunk-a808dfec.0670aa22.css" rel=prefetch><link href="/undefined/css/chunk-a97ba050.343c0125.css" rel=prefetch><link href="/undefined/css/chunk-dbbcb6ca.afbf6e2a.css" rel=prefetch><link href="/undefined/js/chunk-02393c0e.1131b09f.js" rel=prefetch><link href="/undefined/js/chunk-0413c1cf.226cb5af.js" rel=prefetch><link href="/undefined/js/chunk-05af17cb.03fb4e75.js" rel=prefetch><link href="/undefined/js/chunk-05c2d357.d226fc27.js" rel=prefetch><link href="/undefined/js/chunk-05f9ac48.bf6105aa.js" rel=prefetch><link href="/undefined/js/chunk-061bbc7c.616f91e0.js" rel=prefetch><link href="/undefined/js/chunk-0c3f6c05.cd0b340b.js" rel=prefetch><link href="/undefined/js/chunk-0ffc1848.fc935ef9.js" rel=prefetch><link href="/undefined/js/chunk-28537b2e.46a32516.js" rel=prefetch><link href="/undefined/js/chunk-2991328e.007c3af2.js" rel=prefetch><link href="/undefined/js/chunk-2d22922a.59463fdb.js" rel=prefetch><link href="/undefined/js/chunk-2d22a109.07601e72.js" rel=prefetch><link href="/undefined/js/chunk-2d22d746.c132ede6.js" rel=prefetch><link href="/undefined/js/chunk-3451d3f0.88a2ff05.js" rel=prefetch><link href="/undefined/js/chunk-3f6524ae.aaee21ad.js" rel=prefetch><link href="/undefined/js/chunk-50451b64.8e065900.js" rel=prefetch><link href="/undefined/js/chunk-579e1ea3.6d02e597.js" rel=prefetch><link href="/undefined/js/chunk-774d451a.ed3b640a.js" rel=prefetch><link href="/undefined/js/chunk-796d4363.0c75e4bf.js" rel=prefetch><link href="/undefined/js/chunk-889ba836.e0cd6e81.js" rel=prefetch><link href="/undefined/js/chunk-8b217ef2.ced2c34f.js" rel=prefetch><link href="/undefined/js/chunk-a0d25322.4e3c26f4.js" rel=prefetch><link href="/undefined/js/chunk-a2794958.e198bb98.js" rel=prefetch><link href="/undefined/js/chunk-a808dfec.07a35948.js" rel=prefetch><link href="/undefined/js/chunk-a97ba050.51a395a6.js" rel=prefetch><link href="/undefined/js/chunk-dbbcb6ca.c0c8846c.js" rel=prefetch><link href="/undefined/css/chunk-vendors.434320c7.css" rel=preload as=style><link href="/undefined/js/app.0215a074.js" rel=preload as=script><link href="/undefined/js/chunk-vendors.6698b677.js" rel=preload as=script><link href="/undefined/css/chunk-vendors.434320c7.css" rel=stylesheet></head><body><noscript><strong>We're sorry but soa doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src="/undefined/js/chunk-vendors.6698b677.js"></script><script src="/undefined/js/app.0215a074.js"></script></body></html>
TheBraveBunny commented 4 years ago

I also had noticed in the environment info that npmGlobalPackages: @vue/cli: Not Found. I've tried:

1) a similar bug suggested it was an npm issue, so I reinstalled with npm install npm@latest -g 2) i reinstalled @vue/cli with npm install -g @vue/cli 3) still wasn't found, so I tried npm install -g @vue/cli-service-global 4) still no global @vue/cli.

I'm not even sure if this is the issue, I just thought it looked suspicious

TheBraveBunny commented 4 years ago

So, it turns out that my environment variables weren't set, which was why it was coming up as undefined. I just set my public path to '/' instead.

vue.config.js:

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  devServer: {
        proxy: 'https://myprojectname.com/',
    },
  publicPath: '/'
}