I'm trying to set my API URL in a .env file, my .env file is in the root folder of my project. I'm using VUE_APP_ prefix.
According to the doc .env file is loaded in any case. So should'nt I be able to get it everytime?
I m using MacOS, no Vuex.
My .env file
VUE_APP_API_URL: '"http://localhost:3000/"'
My .vue file
data() {
return {
test: process.env.VUE_APP_API_URL
}
},
I expected to get http://localhost:3000/ but I get undefined
Your syntax is wrong in your .env file. It's VUE_APP_API_URL = with = not :.
And you don't need double and simple quotes.
It should work this way:
VUE_APP_API_URL = 'http://localhost:3000/'
You'll need to reference the .env file in Webpack so that the variables get compiled into the build. The reason why you can't reference the variables is that they're not parsed into your build/public folder.
I'd use something like
https://github.com/mrsteele/dotenv-webpack
Related
I tried to use dotenv-webpack, but the .env also included in the bundle.
What I wanted to do is to make the .env readable after the build.
static/
index.html
.env
is this possible on spa's?
No, this is not possible with the standard Vue-CLI/Webpack unless you search inside the bundled gibberish of your code.
If your intention is to do something with the bundled data like changing values inside your .env then there is a way to hook your app with a env.js file, but this should not contain sensitive data.
Explanation of post- "env.js" hook:
you have to check for a global variable somewhere in you code.
i make a example of changing the axios baseURL after bundling the project.
place a js file like "env.js" in the first place of initialization in your web server.
// env.js
document.env = 'https://www.use-other-api.com'
so "document.env" is now declared before your app runs
then you have a hook in your project which is prepared for this "after bundled env changes"
like:
if (document.env === 'https://www.use-other-api.com') {
// change axios baseURL to "document.env"
} else {
// stay default baseURl
}
and that's it.
just be aware of not using any sensitive data in this scope because it is accessible anywhere in your app.
like i would not recommend you to put in some secrets depending in your backend stuff.
No, the .env file should be loaded on the server that runs your app. That's what it's name stands for. It consists of enviromental variables that you can use globally.
You can find more...
https://codeburst.io/process-env-what-it-is-and-why-when-how-to-use-it-effectively-505d0b2831e7
I'm using #vue/cli 4.2.3 but when I create a .env file in my project root folder and declared a new env variable in it then print it in any component it returns undefined.
My env variable is like
VUE_APP_NAME=VALUE
and I'm calling it like
console.log(process.env.VUE_APP_NAME)
and the result is always undefined
Any help, pls?
With the information you give it seems that you are doing well.
The file is in the root.
The variable starts by VUE_APP_
I would check that the .env file has no extension.
I want to load a .jscad file into a vue component.
I have set up an vue-cli project, installed this openjscad-vue viewer using npm and am using the openjscad component. This component has the prop design which should allow specifying a path to a .jscad file for the openjscad viewer. This is not working properly.
Tried to find the error and do a workaround:
Inside this component (OpenJscad.Vue) is a fetch() request to load the .jscad file, but it doesnt work. To be sure that the openjscad processors is working correctly I used a plain string containing the .jscad code as source and this works!
But I want a whole .jscad file loaded.
I think the fetch request is the problem. I only need a static .jscad file to be loaded from the same server the vue-cli project is serving.
I've tried this:
using axios:
async mounted() {
[...]
await axios.get("/logo.jscad").then(response => (this.source = response));
installed raw-loader/file-loader and configure it inside vue.config.js. Imported the file from the assets folder. -> Webpack loader error. It seems to me that vue.config.js is ignored?
import logo from "logo.jscad"
this.source = logo
Any recommendation to solve this problem?
Thank you.
To answer part of my own question and maybe help other people:
the vue.config.js file do not have to be at same directory as package.json. It is only loaded and used after put inside the /src directory next to main.js or App.vue
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.
In Vue.js you have the possibility to use the # in a path file as a shortcut to your src folder. It is nice because all your files have an absolute path.
However I don't manage to find a way to configure WebStorm to understand that and allow me to follow and check if the file exist when using it.
Example :
import Business from '#/components/Business/Business'
Writing that I want WebStorm to tell me if the file does not exists and to allow me to go to that file directly.
I did not manage to find any answer about it and neither managed to find a way to do it in the IDE.
For vue-cli3, you need to specify a full path to node_modules/#vue/cli-service/webpack.config.js as a webpack configuration file in Settings | Languages & Frameworks | JavaScript | Webpack.
Note that this only works for JavaScript; webpack aliases are not resolved when using components written in TypeScript, path mappings in tsconfig.json should be used instead
In phpstorm 2020.3.3, I could fix this by
Opening Settings > Languages & Frameworks > JavaScript > Webpack and choose "Automatically"
Once saved, this opens a popup asking to run webpack configuration. Click "Trust project and run"
Fixed!
Webstorm already supports resolving alias. Webstorm read your webpack.config.js in background.
If you're using vue-cli 3, we don't have webpack.config.js, but you can create webpack.config.js file manually
module.exports = {
resolve: {
alias: {
"#": require("path").resolve(__dirname, "src") // change this to your folder path
}
}
};
webstorm will resolve it automatically
vue-cli3 you can select node_modules/#vue/cli-service/webpack.config.js as webstorm configuration file Settings > Languages & Frameworks > JavaScript > Webpack.
or create webpack.config.js in the root directory, content is
const resolve = dir => require('path').join(__dirname, dir);
module.exports = {
resolve: {
alias: {
'#': resolve('src')
}
}
};
And then as webstorm configuration file.