I am creating a file in the src folder called config.js that contains all my variables, and I read them from .env file
const config = {
ENVIRONMENT: process.env.NODE_ENV,
API_URL: process.env.VUE_APP_API_URL,
.....
};
export default config;
and the .env file
NODE_ENV="dev"
VUE_APP_API_URL="http://localhost:3005/"
and my main.js
...
import config from './config';
...
const isProduction = config.ENVIRONMENT === 'production';
now in my main.js when I try to import the config file and trying to read it, it give me error
'process' is not defined
Related
I have 11 .env files for testing and other reasons.
Is there way I can put them in a folder and use them from there?
Such as:
/root
env-container
.env-test1
.env-test2
.env-test3
You can configure the location of the .env files with the envDir config:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
envDir: './root/env-container',
})
I'm trying to completely understand the path aliases with Vue and Vite.
Outside of the <script> block (e.g. <style> and <template> or other .js files) absolute paths with ~ or the # alias, for getting the root directory are working. But inside I still need to use ../../../ for getting back to the root. If I try using ~ or # I get errors for files not being found.
Also wouldn't # and ~ do the same in that case?
EDIT:
// Somehow working cause it's no component but a mere .js file
import {
filterwords
} from '#/services/signup/filterwords.js';
// Working
import passwordMeter from '../../utility/PasswordMeter.vue';
// Not working
import passwordMeter from '~/utility/PasswordMeter.vue';
import passwordMeter from '#/utility/PasswordMeter.vue';
Do proper changes in vite.config.js. Tested this locally and it solves it.
Add '~' if you also want to use that.
// vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
resolve:{
alias:{
'#' : path.resolve(__dirname, './src')
},
},
plugins: [vue()]
})
Credit to this article: https://vueschool.io/articles/vuejs-tutorials/import-aliases-in-vite/
I have a somewhat large config.js file that I have created to for config type things. I am using a .env to keep secrets and such out of my github. In my .env file I have a variable called environment that I use to determine if I am on local, dev, stage, or prod. In my config.js file I am using that to load my certs and keys, and a bunch of other variables that are dependent on which environment I am on.
In one of my Vuex Store files, when I do the following it works
import config from '#/config'
console.log(process.env.enviorment) // This logs out 'development' which i set in my .env file
const environ = config.developmemt
When I do the following I get 'environ is undefiend', even though I can see 'development' logged out.
import config from '#/config'
console.log(process.env.enviorment) // This logs out 'development' which i set in my .env file
const environ = config[process.env.enviorment]
My VueEx file...
import config from '#/config'
console.log(process.env.enviorment) // <--- This is where it loads undefined at the app.js file which is my store, but loads the value in client.js
console.log(this.app) // <----------- this.app is undefined every time.
const environ = config.developmemt
export const state = () => (
{
environment: eviron
}
)
You can use process.env only during build process. You want to use ENVs in runtime. In nuxt we have built-in ENVs handling:
https://nuxtjs.org/docs/directory-structure/nuxt-config#runtimeconfig
In .env file add your ENVs:
ENVIRONMENT=staging
In nuxt.config.js you can use process.env.ENVIRONMENT, because it will be assigned during build time:
export default {
publicRuntimeConfig: {
environment: process.env.ENVIRONMENT
},
};
Then you can get all your ENVs from publicRuntimeConfig during runtime (in vue and store files):
this.$config.environment
You can check my demo here:
https://codesandbox.io/s/nuxt-envs-hx2cw?file=/pages/index.vue
I'm working on a project that is using Vue / Gridsome and have a question about importing a config.json file with import './config.json' into the main.js file.
The config.json files is as follows:
{
"brand": "Name"
"company_no": "12345678"
"charity_no": "87654321"
"registered_address": "25 Riverdale House: London: SE13 7LW"
"contact_email": "support#name.com"
}
The main.js file is as follows:
export default function (Vue, { router, head, isClient }) {
Vue.component('Layout', DefaultLayout)
Vue.component('Page', PageLayout)
Vue.use(InfiniteLoading)
// General
head.meta.push({
name : 'description',
content : config.brand // I'd like to place the json value here
})
// ...
Will I need to install a plugin which parses the JSON to be able to read these properties, and how would I go about accessing the brand value as an example?
You can simply do something like:
import configJson from './config.json';
const config = JSON.parse(configJson);
Then you can access the data with config.brand for example.
More about JSON parse:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
EDIT
It works if you have webpack >= 2.0.0
https://webpack.js.org/loaders/json-loader/
Otherwise you could create a js file and export the json from there:
config.js
export default
{
// put json here
}
I have a project created through Vue CLI and now I want to use Pug with my Single File Components i.e. the .vue files.
To do that I started following this vue-loader documentation and installed pug and pug-plain-loader with the command npm install -D pug pug-plain-loader. And the next step there proposes inserting the follows in webpack.config.js
// webpack.config.js -> module.rules
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
But, using Vue CLI, I do not have an explicit webpack config file, but vue.config.js.
So, how to add such a pug-plain-loader configuration in vue.config.js (preferably using webpack-chain)?
My current vue.config.js already featuring a svg-loader is as follows:
module.exports = {
// ...
chainWebpack: (config) => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
//TODO: add pug-plain-loader configuration here
}
}
Accordingly with the example here, Vue CLI has it own way to define new rules in webpack. So this code seems to be the right way to define the pug loader (in your vue.config.js file - if doesn't exists, create it):
module.exports = {
chainWebpack: (config) => {
// Pug Loader
config.module
.rule('pug')
.test(/\.pug$/)
.use('pug-plain-loader')
.loader('pug-plain-loader')
.end();
},
};
This worked for me c:
(this apply only in .vue files that have lang="pug" specified in template tag)