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
Related
I want my web app, that's built with Nuxt.js and Vue.js to access the environment variables that I added in the Netlify environment UI (setting menu).
When I run the local server I have no problem with my code accessing the .env file and retrieving the right codes.
But when I build it with Netlify, it returns undefined.
I have tried adding different prefixes to the env variables since I saw some people do this:
VUE_APP_MY_VARIABLE
NUXT_APP_MY_VARIABLE
VUE_MY_VARIABLE
NUXT_MY_VARIABLE
I do not understand why the variables can not be accessed when the site is live.
If you're missing any information, let me know and I will add it.
Thanks in advance!
Maybe this page can help you!
https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env
Try:
NUXT_ENV_MY_VARIABLE
instead of
NUXT_MY_VARIABLE
I use Netlify and Nuxt together with dotenv package:
"#nuxtjs/dotenv": "1.4.1",
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'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
I have a project started with the vue-cli, and i'd love to include a component from a different local folder. I'm not that great at webpack config, so I'm not sure if it's just as simple as adding another path to some config setting. I've looked around in the docs, but everything I'm finding shows me the awesome auto scaffolding that vue init project gives us.
Any ideas?
Here's what the project structure looks like:
webroot/
-wp-content/
-wp-admin/
-wp-includes/
-other PHP classes/
-static/
-vue/
-global-components/ (<- this is where i'd like to put some generic .vue components)
-app1/ (<- this was created by vue-cli and is where i'd like to build a specific vue app for a specific wordpress page/post)
-app2/ (<- this was created by vue-cli and is where i'd like to build a different app for a specific wordpress page/post)
So, you can see there's a bunch of things going on in this repo, and I'd like to be able to reference both the src folder inside app1 and app2, but also have each app reference the global-components folder. I'm not sure that the client would like to push their custom components up to npm, and I don't think they want to build out their own private npm source, so I was hoping for a way to build multiple vue.js applications without copying these components to each individual app.
Any thoughts?
I am trying to use Aurelia bundle --force command with an Aurelia app hosted within a page of my MVC application.
When i try to run the command, I keep getting the following error:
info: Creating bundle ...
fs.js:549
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
Error: ENOENT: no such file or directory, open 'C:\Users\...\WebFrontend\index.html'
How do you change the location where aurelia bundle looks up for the index.html? My index.html is not in the root of the website. Furthermore, my aurelia 'index.html' is actually named settings.cshtml
UPDATE:
I finally got it working by putting my entire Aurelia app within a sub folder of my MVC app. Using post build events in my project, I got Aurelia-CLI to bundle my app. Within my setting.cshtml, I basically just reference the config.js and system.js.
This works great, but I need to rebuild the app each time I make a change which is not ideal. Still need to figure this one out.
Steve Sanderson made a template for Aurelia (that is no longer supported by Microsoft). https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/
You can also use the Aureali cli to create one.
This should work better now then in 2015.