I created a project with Vue CLI 4.1.2, and inside router/index.js, I found:
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
There is no .env file in the project root. So what does process.env.BASE_URL mean? Where is the BASE_URL value set?
process.env is a property that contains the user's environment variables in Node. The .env is an optional file that could be used in Vue CLI projects to create additional environment variables. Note that you could also create .env.production and .env.development files to set variables specific to the current build mode.
BASE_URL is an environment variable automatically set by Vue CLI when running serve or build NPM scripts. Its default value is /, but it can be configured in <projectRoot>/vue.config.js with the baseUrl (deprecated) or publicPath setting:
// vue.config.js
module.exports = {
publicPath: '/my-app/'
}
Related
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 can't find documentation on how to minimize assets and produce *.min.js files using vue cli.
Im using vue cli version 4.2.3.
I require the extention to be *.min.js for rollbar to function correctly.
How would you go about configuring vue cli to produce minimized assets? (no TS involved).
I'm sure Vue CLI minifies JS output when running build in production mode. It's just using different naming convention (no "min.js")
To tweak file names of JS chunks produced by Vue CLI, you can do the following:
Check the default Webpack config Vue CLI uses by running vue inspect on command line (dev mode) or vue inspect --mode production (production mode)
Look for an output (should be near the beginning of the output). In my project it looks like this:
Dev mode:
output: {
path: '.....some dir\\dist',
filename: 'js/[name].js',
publicPath: '/',
chunkFilename: 'js/[name].js'
},
Production mode:
output: {
path: '.....some dir\\dist',
filename: 'js/[name].[contenthash:8].js',
publicPath: '/',
chunkFilename: 'js/[name].[contenthash:8].js'
},
Now you can tweak it - add vue.config.js to your project if you don't have it already and add following:
module.exports = {
configureWebpack: config => {
if(process.env.NODE_ENV === "production") {
config.output.filename = 'js/[name].[contenthash:8].min.js'
config.output.chunkFilename = 'js/[name].[contenthash:8].min.js'
} else {
config.output.filename = 'js/[name].js'
config.output.chunkFilename = 'js/[name].js';
}
}
}
[name] and [contenthash:8] are Webpack placeholders - more info in documentation
I'm using Vue CLI 3.3 and building vue projects for my vertical website, but every time I build the project, the assets of dist/index.html always load from my root path, like:
<script src=js/chunk-vendors.b0f460c7.js></script>
Is there a way to make these assets load from current path? Such as
<script src=./js/chunk-vendors.b0f460c7.js></script>
You can set publicPath in your vue.config.js (see https://cli.vuejs.org/config/#publicpath)
module.exports =
{
publicPath: './',
};
The agenda is to use certain flags and a specific api base url for different modes say dev, local and prod in my NativeScript Vue app.
Just like NativeScript angular has environment.[mode].ts files?
I've tried using .env.[mode] files, by referring to VueJs docs
// https://cli.vuejs.org/guide/mode-and-env.html#environment-variables.com
But this did not favour the scenario.
// Something like this of a config,
module.exports = {
NODE_ENV: "production",
ROOT_API: "some api url"
}
The config should be accessible like this
process.env.ROOT_API throughout the app.
Refer the Pass Environment Variables section in the docs.
You can also provide environmental variables to the Webpack build:
$ tns build android --bundle --env.development --env.property=value
They can be accessed through the env object in the Webpack
configuration:
// webpack.config.js
module.exports = env => {
console.dir(env); // { development: true, property: 'value' }
}
You may update your DefinePlugin something like below,
new webpack.DefinePlugin({
"global.TNS_WEBPACK": "true",
"global.ENV_NAME": JSON.stringify(name),
"global.ENV_PROPERTY": JSON.stringify(env.property),
process: undefined,
}),
Now using global.ENV_PROPERTY anywhere in your project should be replaced by actual value you pass in command line at compile time.
If you are familar with webpack, you may also configure the CopyWebpackPlugin to copy right environment file to your app instead of having variable for each configuration.
I am working on a Vue.js project and all files are generated by webpack on dev and production mode.
but here is my problem :
I can see my vue components in devtools when I inspect on a element.
How could I disable that ?
By the way source map is disabled and I have no .map files in dist folder.
thank you :)
Just checkout the Vue cli docs:
productionSourceMap Type: boolean
Default: true
Setting this to false can speed up production builds if you don't need
source maps for production.
So in your webpack config you write:
module.exports = {
productionSourceMap: false
};
If your vue.config.js which is responsible for your webpack configuration doesn't exist, you may create it.
If webpack has been configured from scratch, it can be removed by deleting or commenting in any case in the webpack production file
the devtool option
tools/webpack.prod.js
module.exports = merge(common, {
// devtool: "source-map",
mode: "production",
...
});