BASE_URL returning undefined in /dist/index.html #5281
Description
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
- Have working Vue project.
- Run
npm run build - Open /dist/index.html file
- 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>