I'm using Vue CLI 3.3 and building vue projects for my vertical website, but every time I build the project, the assets of dist/index.html always load from my root path, like:
<script src=js/chunk-vendors.b0f460c7.js></script>
Is there a way to make these assets load from current path? Such as
<script src=./js/chunk-vendors.b0f460c7.js></script>
You can set publicPath in your vue.config.js (see https://cli.vuejs.org/config/#publicpath)
module.exports =
{
publicPath: './',
};
I'm working with Webpack 4.43, Vue 2.6.11 & Vue Router 3.1.6
Webpack generates a dist folder with a bundle.js and an index.html.
If I navigate to nested pages through the app links everything works fine, but if I try to reload a nested page, the index.html can't load bundle.js because it tries to find it at the nested page level. For example if I go to localhost:8080/fr/contact it will try to load localhost:8080/fr/bundle.js
I've seen many other related topic but no one ever gives a real answer. Does anyone have a solution?
EDIT: Don't know if it helps, but I just realized that the images don't load in nested pages even when I reach them through the router-links. Same problem: it looks for localhost:8080/fr/my-image.png instead of localhost:8080/my-image.png
Finally solved it by setting publicPath: '/' in my Webpack config (not the Vue config). Here's how it looks:
module.exports = {
...
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
...
}
I'm trying to deploy a VueJS/Express app to Heroku which consists of two App.vue instances using the 'pages' option on vue.config.js. One for the homepage, and then a seperate Vue app for the Saas app itself. Everything works locally in development, but I'm struggling with the server settings in Express for production on Heroku.
When I go to the page 'app' at pat-simplebooks.herokuapp.com/app looking at the sources tab in DevTools the app.js and app.css files returned are both the actual HTML of app.html, hence the app not loading.
The homepage works fine and is calling the 'index' page as expected.
Here is my vue.config.js
module.exports = {
pages: {
index: {
entry: 'src/pages/index/main.js',
template: 'public/index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
app: {
entry: 'src/pages/app/main.js',
template: 'public/app.html',
chunks: ['chunk-vendors', 'chunk-common', 'app']
}
}
}
And the relevant production settings in Express;
const history = require('connect-history-api-fallback');
if(process.env.NODE_ENV === 'production'){
app.use(history({
rewrites: [{
from: /\/app/,
to: '/app.html'
}]
}));
app.use(express.static(path.join(__dirname, '../../client/dist')))
}
I've tried adding <base href="/ "> to the HTML templates, as well as <base href="/app/" > but to no avail, as suggested in other answers I've found. Also the publicPath webpack option doesn't work for multiple pages as noted in the VueJS docs.
Removing the history redirect setting in Express allows me to navigate to http://pat-simplebooks.herokuapp.com/app.html - which works, however as soon as I refresh the page it redirects back to the 'index' page.
Any help would be great, I've exhausted my Googling skills.
I managed to work it out, incase anyone has the same issue in future.
The connect-history-api-fallback package needed to provided with the htmlAcceptHeaders option to only rewrite the html location, and not the JS/CSS assets.
app.use(history({
rewrites: [{
from: /\/app/,
to: '/app/index.html'
}],
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
}));
app.use(express.static(path.join(__dirname, '../../client/dist')))
I am using Vue 2.0 and Vue CLI 3.0. I am trying to get the favicon.ico/png file work properly and am having no luck at all.
I have narrowed the issue to the following.
The index.html file generated by yarn build converts this line of html code:
<link rel="icon" href="favicon.png" >
to...
<!--[if IE]><link rel="icon" href="favicon.png"><![endif]-->
If I go into Chrome developer tools and change the line back to the way I had it originally, the ico/png file renders as expected.
My question is: how do I fix this so that yarn build stops messing up my html code.
Inside the vue.config.js set the PWA options for the icons to point to whatever icons you want. Specifically, set pwa.iconPaths for example:
module.exports = {
pwa: {
iconPaths: {
favicon32: 'img/icons/myFavicon.png',
}
}
}
See
https://cli.vuejs.org/config/#pwa
https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
I am trying to get vue.js source code for production.
I used this command npm run build. I got a dist folder with index.html and a folder named static with all css and js.
When I tried running the index.html in localhost, ie, xampp server I got a blank page .
Is it possible with vue.js to run in xampp.
First create vue.config.js file in project root directory and define base url in it using below code
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/'
}
If you use Vue CLI 3.3 or higher, use
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ?
'/production-sub-path/' :
'/'
}
Replace production-sub-path with your folder name ... eg. http://www.example.com/production-sub-path/ ... and run below command to build the project
npm run build
After finishing the build ... Copy/Upload all files in dist folder to your /production-sub-path/ folder... That's it
For more info checkout the official documentation
https://cli.vuejs.org/guide/deployment.html#general-guidelines
I had this issue before as well. I solved it by making a change to the index.js file in the config folder. Under build, I changed:
assetsPublicPath: '/',
to
assetsPublicPath: '',
and tried npm run build again. I checked the dist file and opened the index.html and it worked, no blank page.
I had the same issue, and I solved the problem by deleting the "/" from the dist/index.html file. I had something like this:
<script src=/js/app.632f4e30.js></script>
And I change it to:
<script src=js/app.632f4e30.js></script>
I created vue.config.js next to the file package.json
With the following content:
module.exports = {
publicPath: ''
}
And run
npm run build
It solved my problem
The following links helped me
https://github.com/vuejs-templates/webpack/issues/310
https://cli.vuejs.org/config/#vue-config-js
Usually when you do a production build the paths that get set in the index.html file prepend a slash in front of it meaning that it will look for the file in the base domain. So im guessing your just trying to open the file in the browser by double clicking the index.html file and having it open in the browser.
Something like
file:///Users/brianvoelker/Desktop/websites/vue-build/docs/index.html
So in that example it is trying to look for files in file:/// and of course the dont exist.
So you can do either two things open the index.html file and remove the slash at the beginning or just know when you deploy that it will work because the files lookup are relative to the base domain.
P.S. If your looking for a cli build tool check out Vue-build.com
Vue.js is a browser side app framework. The server side technology does not matter, unless you are attempting to do server side rendering.
npm run build works perfectly alright, and it creates a minified set of files for manifest.#.js, vendor.#.js and app.#.js
Open the network tab in developer tools of Google Chrome to see what files are getting loaded. If any of the js files are not getting loaded, it is a path configuration that you need to do, so that your server serves the right files.
You may have to tweak the index.html file a bit so that it fully meets your requirements, and move the js files from dist/static folder to your preferred location. The url path does not matter, as long as the app files are served in the right order.
I encountered a similar issue and the above info helped me. However, I found that if you edit the index.js file in the config folder for the VueJS CLI webpack tooling and edit the 'assetsPublicPath:' variable to './' from the default '/' then future builds will find the correct references to the css and js files in the static folder.
I have solved this by adding this code under root directory,
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/'
}
or you can remove first '/' from index.html file that has been created under dist.
example href=/js/chunk-vendors.7a32d01e.js to href=js/chunk-vendors.7a32d01e.js
I had the same situation with a different issue, I used the vuejs-webpack-project project and tried running the output files under an IIS server.
This code in index.html didn't work:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>vuejs-webpack-project</title>
<link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>
<body>
<div id=app />
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js />
<script type=text/javascript src=/static/js/vendor.4ad267b4786a3ebd3327.js />
<script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js />
</body>
</html>
This code worked(needed to change the closing tags of the script elemet):
<body>
<div id=app />
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.4ad267b4786a3ebd3327.js></script>
<script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js ></script>
</body>
Open vue.config.js you see the following code.
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
update code to this
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath:''
})