I have small vue2 cli project that is really difficult to configure. I don't know why all the examples that I found gives build error
I have now vue.config.js file
module.exports = {
//publicPath: '/xxx',
configureWebpack: {
devtool: 'source-map'
}
}
what i need to do to make console off in release build?
Related
I created new fresh project with latest VueJS-cli tool. Looks like VueJS CLI is using Webpack 4.43.0.
How to remove that Webpack section, that is visible under browser console/debugging tab?
All code with comments are visible and nothing is striped and uglified.
yarn build shows that it is building for production. Also I tried export NODE_ENV=production
Thanks in advance
I solved.
In : vue.config.js
module.exports = {
configureWebpack: {
devtool: false
}
}
I have a simple project generated with vue-cli. When I run the vue-cli-service build command it produces CSS file correctly. When I run the vue-cli-service build --watch command it only builds JavaScript files. There are no CSS files.
How can I generate CSS files in watch mode?
You can achieve this by adding this line of code in your vue.config.js
//vue.config.js
module.exports = {
//adding extract css true solves this issue
css: {
extract: true
}
}
https://cli.vuejs.org/config/#css-extract
There is a good chance that you have to use an extract plugin for webpack.
I know that in my vue.config.js file I'm using :
chainWebpack: config => {
if (config.plugins.has('extract-css')) {
const extractCSSPlugin = config.plugin('extract-css');
extractCSSPlugin &&
extractCSSPlugin.tap(() => [
{
filename: 'build.css',
chunkFilename: 'build.css'
}
]);
}
}
Hopefully this help you. However vue inject your css in watch mode right at the top of your file for automatic re-rendering purpose I think.
I'm trying to integrate a vue project that I built with the vue cli into an existing .net app. I'm very new to vue, so I'm trying to follow guides and such, but am left with lots of questions.
While trying to compile this, I found that the vue cli-service node module has the following for setting the main.js file located in it's base.js file.
webpackConfig
.mode('development')
.context(api.service.context)
.entry('app')
.add('./src/main.js')
.end()
.output
.path(api.resolve(options.outputDir))
.filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
.publicPath(options.publicPath)
I need to override this since my .net app doesn't have a src directory and the usage of this vue app won't follow that path structure. I'm not seeing a way to do it in my vue.config.js file. I would expect that if I can override it, that would be the spot.
I could overwrite the base.js file where this exists, but when a co-worker runs npm install, they would get the default value rather than what I have. The only option I see there is checking in all the node modules to git which we really don't want to do.
For anyone in a similar situation, I found what worked for me. It's not the ideal solution due to the fact that it forces you to build into a js folder. That resulted in the file being put in Scripts\build\vue\js. Would be nice to be able to just dump it in the vue folder, but at least this works. Code below.
vue.config.js
module.exports = {
publicPath : "/",
outputDir: "Scripts/build/vue", //where to put the files
// Modify Webpack config
// https://cli.vuejs.org/config/#chainwebpack
chainWebpack: config => {
// Not naming bundle 'app'
config.entryPoints.delete('app'); //removes what base.js added
},
// Overriding webpack config
configureWebpack: {
// Naming bundle 'bundleName'
entry: {
quote: './Scripts/Quote/index.js' //where to get the main vue app js file
},
optimization: {
splitChunks: false
}
},
filenameHashing: false,
pages: {
quoteApp: { //by using pages, it allowed me to name the output file quoteApp.js
entry: './Scripts/Quote/index.js',
filename: 'index.html'
}
}
}
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",
...
});
I have a web app with laravel and vuejs.
I use laravel-mix and in my webpack.mix.js i have:
const { mix } = require('laravel-mix');
mix.sourceMaps();
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
now I would obfuscate code, so all my components, how can I do this with laravel-mix?
npm run dev will NOT uglify / minify your code, but npm run production WILL.
If you are looking to use uglify...
laravel mix is just a wrapper around webpack. So you can install the UglifyWepackPlugin here https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
Afterwards, you can edit your mix.webpackConfig to use the plugin, as detailed here: https://laravel.com/docs/5.5/mix#custom-webpack-configuration
Install https://github.com/javascript-obfuscator/javascript-obfuscator and https://github.com/javascript-obfuscator/webpack-obfuscator.
After that you need to include de plugin in the webpack configuration, you can do that adding the next code in webpack.mix.js file.
let mix = require('laravel-mix');
let JavaScriptObfuscator = require('webpack-obfuscator');
mix.webpackConfig({
plugins: [
new JavaScriptObfuscator ({
rotateUnicodeArray: true
}, ['excluded_bundle_name.js'])
],
});
mix.js('resources/assets/js/app.js', 'public/js');
After that all your js files will be obfuscater.