I'm using the latest vue-cli version 3.0.
My current issue is that whenever I run npm run build the files generated in the dist folder can't be run without a server.
I would like to be able to just open the index.html file on the browser. How do I go about doing this?
I ran into a similar issue and the following two changes helped me to make it work. Now I can just open index.html in Chrome as a file to run my SPA from file system.
In vue.config.js, I did not have a publicPath configured, which resulted in the default "/".
I had to configure it to empty string like this so that it uses relative paths:
module.exports = {
publicPath: '',
}
PS: Since Vue CLI 3.3 use publicPath instead of the now deprecated baseURL
I was using the history mode of vue-router, which does not work
on a local file system to route the paths back to index.html. So I
omitted the mode to go back to the default hash mode.
I was able to fix this issue by manually changing the url of the referenced files.
It's a bit of a pain, but this was a solution without having to mess around with the build configuration.
What you need to do:
Open index.html
Find href=/ and replace with href=
Find src=/ and replace with src=
NOTE: I was in need of this solution because I was creating a Phonegap app.
You can use the http-server module
npm install http-server -g
http-server dist/
normally the server starts at port 8080 so you can serve the build app on http://localhost:8080
Related
I have created .env file to set environment variables as shown below:
Inside which I have given below mentioned code.
VUE_APP_BASEURL="https://qa-apps-nodejs.Dtech.com:9000/"
PORT=8080
I have written below code in my js file and executed npm install dotenv:
require('dotenv').config();
console.log(process.env.VUE_APP_BASEURL);
With the above code, I need to get https://qa-apps-nodejs.Dtech.com:9000/ in console. But instead I'm getting:
undefined
Just restart your server as newly created env variables are not available only after hot-reload you have to rebuild your application (restart your server). For reference you can look here
No need to install "dotenv" simply place .env file in the root of your project (at the same level of your package.json file) and Vue CLI will handle the reset. Side note; as of Vue CLI 3 only variables that start with VUE_APP_ will be loaded. make sure also to rerun npm run serve again to restart your server.
for more details: visit docs
I have a VueJS app that I would like to deploy, i'm currently running npm run build to build the app, however I want this app to be in a subdirectory of my website.
The problem i'm having is when building the app, it creates the wrong paths to the css and javascript file.
I have tried using root inside babel.config.js but it gives me an error when I try to build it (root is only allowed in root programmatic options).
Anyone know how I can go about fixing this issue? Any help is greatly appreciated!
Check out the publicPath and base options:
https://cli.vuejs.org/config/#publicpath
https://router.vuejs.org/api/#base
Possibly you will also need to adjust your webserver config if using history mode:
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
I have a Vue CLI application that I'm currently working on that uses code splitting for JS and CSS, and builds almost 1,000 JS/CSS files on running npm run build.
I am hosting this application on Google Cloud Run, where I pay per request. While the cost is still not that significant, I was still looking to try and prevent the need for 500 requests for every page view. I had a thought, but I'm not sure it's possible...
What I was wondering was if I could have my webpack build generate the JS and CSS files into the dist folder, but reference those files in the index.html file with an external host, instead of assuming a relative path. For instance, the file would exist at dist/css/chunk-abc123.js but in index.html, it would be something like https://storage.google.../css/chunk-abc123.js.
That way, in my CI pipeline, I can upload those files from the dist directory into Google Cloud Storage, and serve them up statically from there.
Does anyone know if this is possible? If so, can you guide me in the right direction?
publicPath comes in rescue.
The base URL your application bundle will be deployed at (known as
baseUrl before Vue CLI 3.3). This is the equivalent of webpack's
output.publicPath, but Vue CLI also needs this value for other
purposes, so you should always use publicPath instead of modifying
webpack output.publicPath.
// vue.config.js
module.exports = {
...
publicPath: 'https://storage.google...'
...
}
I have a Vue Cli 3 app which, when built, creates a bundle of web components in the "dist" directory.
I'm looking for a way to be able to browse the files within the "dist" directory when running npm run serve, which starts the webpack dev server.
When I do this now (i.e., something like browse to http://localhost:8083/dist/component.js), I'm simply presented with the index.html file found in the public directory.
How can I configure via the vue.config.js file the ability to have the devserver serve up files in the "dist" directory?
devServer is intended to provide development environment with configurations to apply certain loaders, plugins, etc. What you are looking for is a way to serve locally hosted files as a working application. These are two different purposes and I would not recommend adjusting devServer config for such purpose.
There are easy ways to serve static files on local machine.
One of the simplest is to use live-server, serve or similar.
In order for it to work with live-server just few steps are required:
1) Install
npm install -g live-server
2) In terminal navigate to the folder where static files are located (e.g. project-folder/dist/
3) Run live-server command.
This will open a browser tab with index.html as an entry point and will simulate a webserver on a local machine. There are many more options available in docs.
But this will serve the purpose and will not interfere with devServer purpose.
I am using aurelia skeleton-es2016. Gulp watch takes at least 2 minutes. I have a dual-core 2.8Ghz amd with 6gb ram.
I initially had issues with missing modules after npm install but fixed those. Not sure if that is relevant to this case.
Also I'm not very experienced with gulp. Are the files being served from the the dist folder? Are those the files being watched by browser-sync for changes? I tried making a change to the index.html page and the change was not reflected in the browser without a reload. Is that file not among the ones watched?
It´s unusual that gulp watch needs so much time.
You should try to reinstall all npm and jspm packages.
If you have problems deleting the npm_modules folder you can try the tool I use in this case: Unlocker.
The files watched by browserSync are in your root folder .. You can see that under skeleton-es2016\build\tasks\serve.js this serve task is used by the watch task.
Or in your console where you are running gulp watch: [BS] Serving files from: .
If you used the newest skeleton-es2016 you should also have a browserSync control App running under http://localhost:3001/
BrowserSync will not detect changes inside your index.html file. That´s because of the watch task configuration:
only files under "src" will be watched.
You can see this configuration under: skeleton-es2016\build\paths.js and skeleton-es2016\build\tasks\watch.js