Is there any possible to add a config file for Vue project to config API URL?
Now I have a Vue web project, and a .Net Web API project.
I have to build the web project every time that I have to publish to different environment.
Is there any possible to add a config file like web.config for .Net Web API that I can edit it any time I want?
What I expected is, I can have a file to edit anytime I want after run command 'npm run build'. Is this possible
yes you can add config file if you use webpack
/config/prod.env.js
module.exports = {
NODE_ENV: '"production"', // or development
BASE_URL: '"https://BASEURL/"',
API_URL: '"https://APIURL/"',
}
Assig in build file and use
process.env.API_URL
reference : https://alligator.io/vuejs/working-with-environment-variables/
Related
I was using Vuejs CDN to develop my app. Now, I want to separate dev and prod since the API endpoints are separated. I don't want to expose my dev API endpoint. How can I do it with the simplest way?
I tried to use dotenv. Put the DEBUG variable in .env.
var debug = process.env.DEBUG;
console.log(debug);
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
var vm = new Vue({...
My .env file
DEBUG=true
I can read the debug variable. However, it gives an error of "Vue is not defined" since I didn't install Vue with npm. Or I must install Vue with npm?
If you're using Vue CLI, facilities for this are already built in in the form of .env files. You'd create .env.dev and .env.production files (and probably a .env.local for local development), containing:
VUE_APP_ENDPOINT=https://...
Which in your Javascript files you can access as:
const endpoint = process.env.VUE_APP_ENDPOINT;
Then you create different builds for your two different environments:
vue-cli-service build --mode dev # or --mode production
The variables will be baked into the build, so your two different builds only contain their respective endpoints.
I am using vue cli 3.6.3.
How can i build a Vue.js project for production if the project is not in the web root?
Inside the webserver the project directory is "my/web/directory"
I start the project using webpack template, and set the publicPath and ROOT_API variables:
config/prod.env.js:
'use strict'
module.exports = {
NODE_ENV: '"production"',
ROOT_API: '"http://www.example.com/my/web/directory/myapi/myindex.php"',
publicPath: '/my/web/directory/'
}
After a npm run build i do upload the dist files (just inside the dist folder: static and index.html) the project point to the webserver root and did not find the js files.
How can i point to the right directory path?
I just find the assetsPublicPath inside the build section of the config/index.js, i do configure and now it is working fine.
I would like to achieve following:
a Vue application is build with npm build,
then the /dist result is copied to some environment
in this enviroment I have some static setting file with name=value settings
the Vue application should read this setting from local folder where it is running or default to some setting
What is the best way to do this.
If you want "to inject" some settings to the bundled app so I think it can be possible only with another js file (globalConfig.js) with global object like:
window.myAppSettings = {
MY_VARIABLE: 'some_value'
}
Which will be copied somehow to your dist folder on a particular environment.
You should also prepare your app to reference that file:
Firstly, add this settings object as external lib in vue.config.js
module.exports = {
chainWebpack: config => {
config.externals({
'my-app-settings': 'myAppSettings'
})
}
}
So you can get your settings in code:
import mySettingsObject from 'my-app-settings'
//...
let myValue = mySettingsObject.MY_VARIABLE
Add reference to globalConfig.js in index.html file in the head section:
<script src="<%= BASE_URL %>globalConfig.js"></script>
Local Development
Probably you will need some default settings to be able to debug your app locally. In this case you can create localConfig.js in your public folder with some default values.
Then change your script in index.html to this:
<script src="<%= BASE_URL %><%= VUE_APP_GLOBAL_SETTINGS_VERSION %>Settings.js"></script>
Then create two files in the project root .env.local and .env.production:
// .env.local
VUE_APP_GLOBAL_SETTINGS_VERSION=local
and
// .env.production
VUE_APP_GLOBAL_SETTINGS_VERSION=global
So when you run npm run serve it will load your local config and your app will load localSettings.js.
And when it builds with npm run build it will load globalSettings.js because building uses a production mode by default.
If you created your project using Vue CLI 3 you can do like this.
Make sure your settings file is named .env and place it in your project root.
In the .env file, your variables should be prefixed with "VUE_APP_"
VUE_APP_SOMEKEY=SOME_KEY_VALUE.
Access them with process.env.*.
console.log(process.env.VUE_APP_SOMEKEY) // SOME_KEY_VALUE
Here's some more info on evironment variables in vue: Vue CLI 3 - Environment Variables and Modes
EDIT:
Sorry. I probably misunderstood your question. This solution will not work if your settings file is in the dist folder.
I am new to vue in general and i am trying to configure some environment variables for some projects of mine so i can do some tests with cookies but apperently i ran the simple webpack configurations when creating these projects, therefore i dont have access to the config directory to edit said variables.
I created a vue.config.js file and used the following lines:
module.exports = {
publicPath: 'myAppName'
}
However if i run it on development mode, or simply use npm run serve my app runs at "http://localhost:8080/myAppName" instead of simply "myAppName".
How do i correctly configure my environment variables for my projects without having to start over from scratch? I am using vueCli 3 btw.
I tried following these examples but none have worked:
Using Environment Variables with Vue.js
I also have .env file and a .env.development file but i am not sure what to add to it.
I'm having some issues with caching my files using the default service worker that comes with VueCLI 3. I would prefer to just use the default browser caching mechanism, but can't seem to disable the PWA plugin as its not in the vue.config.js file. Passing a blank object to the pwa option doesn't work either as the object is merged and not overwritten.
I resolved this by doing the following:
Removing the registerServiceWorker.js file
removing the import of registerServiceWorker.js from main.js.
removing the PWA plugin from the devDependencies in package.json.
Vue enabled a method to disable pwa for certain builds in version 4. Now you can add --skip-plugins pluginname during your build. This one worked for me just fine:
npx vue-cli-service build --skip-plugins pwa,workbox
Ref: https://cli.vuejs.org/guide/cli-service.html#skipping-plugins
There is an open but accepted proposal to add this to the core functionality:
https://github.com/vuejs/vue-cli/issues/3830
EDIT:
Via command line:
https://cli.vuejs.org/guide/cli-service.html#skipping-plugins
npx vue-cli-service build --skip-plugins pwa,workbox
Via vue.config.js:
module.exports = {
chainWebpack: config => {
config.plugins.delete('pwa');
config.plugins.delete('workbox');
}
}