Vue CLI v3 always creating "dist/report.html" when building for production. It's a webpack bundle analyzer report.
I can't find a way to stop building that file.
How to avoid creating "report.html" when building Vue CLI 3 app for production?
Here is my package.json scripts:
"scripts": {
"dev": "npm run serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
So far the only way I found to disable it is via vue.config.js:
pluginOptions: {
webpackBundleAnalyzer: {
analyzerMode: "disabled"
}
},
Would be good to know why this thing is always on in Vue CLI 3.
I'd like to share some updates as of Vue CLI 3.8.4:
Vue CLI
webpack-bundle-analyzer is a dependency of #vue/cli-service#^3.9.0
By the default, vue-cli-service build does not generate dist/report.html nor dist/report.json
According to Vue CLI documentation:
--report generates the dist/report.html
--report-json generates the dist/report.json. By the way, this JSON file can quickly become huge
Both argument can be cumulated (both report.html and report.json are generated). When I tested, cumulating both arguments make the build time significantly longer
Webpack bundle analyser
The Vue CLI does not automatically run a web server to preview the report files. If you want to the webpack-bundle-analyzer in the standard way, the webpack configuration has to be updated:
// in {root folder}/vue.config.js
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
Even without the --report nor --report-json, the report.html will always be generated and the 8888 port should be available as http://localhost:8888 will be prompted
Make sure that your build npm script does not contain the --report parameter.
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"build": "vue-cli-service build",
"report": "vue-cli-service build --report",
}
Related
I am attempting to enable https from my vue.config.js file
Vue.js version: 2.6.14
#vue-cli version: 4.5.13
Current vue.config.js
module.export = {
devServer: {
/*
Attempting to use certficate to utilize https, but neither approach works
https: {
key: fs.readFileSync(path.join(__dirname, '../certs/[key].pem')),
cert: fs.readFileSync(path.join(__dirname, '../certs/[cert].pem'))
}*/
https: true,
public: 'https://localhost:8080/'
},
}
I have even tried changing the port in the config file, but have had no luck. Part of me is thinking that the config file is not being read in properly, but I cannot understand why.
To start the dev server I currently use npm run serve
Current project directory structure
/project
- /certs
- /frontend
-- /node_modules
-- /public
-- /src
-- /tests
-- babel.config.js
-- jest.config.js
-- package.json
-- package-lock.json
-- vue.config.js
package.json Scripts Section
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
}
Any pointers to what is going wrong is greatly appreciated.
Hello I wish compile Vue files with Gulp, so far I've used gulp, webpack and webpack-stream which did the trick, my Vue compiling was set through webpack.config.js and webpack-stream was great for that.
But since I updated package.json and Vue to rely on vue-cli-service and vue.config.js I have to compile with 'npm run ...script andrun "vue-cli-service build".
I've managed to get it working like this:
In gulpfile.js
gulp.task('site-js', siteJS);
function siteJS() {
return gulp.src('src/js/**.js')
.pipe(plumber())
.pipe(webpack(webpackConfig))
.pipe(gulpif(globalVars.productionBuild, uglify()))
.pipe(gulp.dest(destDir));
}
In package.json
"scripts": {
"build-dev": "gulp build-dev",
"build": "gulp build",
"css": "gulp css",
"js": "gulp js",
"vuejs": "./node_modules/.bin/vue-cli-service build ./src/vue/app.js",
"dev": "gulp watch",
},
This works fine when I run 'gulp build' but it does not support 'gulp watch' as when .exac() is run from gulp watch state it crashes.
Is there a way to run vue build from code using vue-cli-service?
I have an app on azure devops with .net core and angular.
Now, I want to implement Angular Universal SSR.
Then, I did on my project:
ng add #nguniversal/express-engine --clientProject angular.io-example
My package.json is:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "npm run build:client-and-server-bundles && npm run compile:server",
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "ng build --extract-css --stats-json && webpack-bundle-analyzer dist/stats.json",
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:ssr": "node dist/server",
"build:client-and-server-bundles": "ng build --extract-css --prod && ng run Catevering:server:production"
}
Then, I can see on kudu the next structure files:
server
browser
server.js
[Check here my file structure][1]
Finally, I change the next line on my startup.cs file:
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});
By:
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist/browser";
});
This way works on and my app is working. But, my app is not working as SSR.
In my localhost my app works as SSR with the next command:
node server.js
For that, I tried to change my code like this:
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist/server.js";
});
But this is not working. However, my backend web api is working.
Someone can help me?
I need to run my app as SSR on azure devops.
I'm overriding webpack config using vue.config.js:
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
publicPath: 'http://0.0.0.0:8080',
outputDir: './dist/',
chainWebpack: config => {
config.optimization
.splitChunks(false)
config
.plugin('BundleTracker')
.use(BundleTracker, [{ filename: './webpack-stats.json' }])
config.resolve.alias
.set('__STATIC__', 'static')
config.devServer
.public('http://0.0.0.0:8080')
.host('0.0.0.0')
.port(8080)
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.headers({ "Access-Control-Allow-Origin": ["*"] })
}
};
The webpack-bundle-tracker plugin generates a file called webpack-stats.json:
{
"status": "done",
"publicPath": "http://0.0.0.0:8080/",
"chunks": {
"app": [
{
"name": "app.js",
"publicPath": "http://0.0.0.0:8080/app.js",
"path": "/Users/me/dev/vue-app/dist/app.js"
}
]
}
}
My problem is that depending on whether I am in development or in production, I want the path to the file to be different.
When I run npm run serve: the generated path should be http://0.0.0.0:8080/app.js (so that the file is served by npm and I can have hot reload etc.)
When I run npm run build: the generated path should be http://0.0.0.0:8000/static/app.js (so that django can serve the file. please note the port number 8000, not 8080)
So I'm wondering if there's a way for vue.config.js to have 2 versions, one that would be used by serve the other one by build.
I know this question is like two years old.
Use the absolute path for the environment variable VUE_CLI_SERVICE_CONFIG_PATH.
You could use $PWD to instead current absolute path.
// package.json
"scripts": {
"serve": "vue-cli-service serve",
"serve:test": "env VUE_CLI_SERVICE_CONFIG_PATH=\"/var/www/html/your_project/vue.config_serve_test.js\" vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
npm run serve:test will use vue.config_serve_test.js
npm run build will use vue.config.js
So, I have the following two files in the root of my vue.js application:
.env.development:
NODE_ENV=development
VUE_WORDPRESS_API=LOCAL
.env.production:
NODE_ENV=production
VUE_WORDPRESS_API=PRODUCTION
I then have the following in my package.json:
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build": "vue-cli-service build --mode production",
},
So, I'm attempting to switch modes and therefore env variables depending on whether I am running $ rpm run serve or $ npm run build.
However, when running npm run serve, inside my application I am seeing that the environment variables aren't being set correctly:
// console.log(process.env.VUE_WORDPRESS_API) <= Undefined
if (process.env.VUE_WORDPRESS_API === 'PRODUCTION') {
axios.defaults.baseURL = window.location.hostname
}
if (process.env.VUE_WORDPRESS_API === 'LOCAL') {
axios.defaults.baseURL = process.env.VUE_WORDPRESS_API_LOCATION
}
I'm wondering, I must have something wrong with my env files? Are they named correctly? What am I missing?