In the development environment, refreshing from /test works fine.
However, when I refresh after deployment, I get a 404 error.
Where is the problem?
vue.config.js
const path = require("path");
module.exports = {
devServer: {
overlay: false,
historyApiFallback: true,
hot: true,
},
transpileDependencies: [
'element-plus'
],
publicPath: '/',
outputDir: path.resolve(__dirname, "./dist"),
}
Related
I am trying to create a production build with the following configureWebpack but Terser doesnt run during build.
Code is not minimized or uglified. Ialso tried hidden-source-map
Using "terser-webpack-plugin": "^5.3.3" with #vue/cli#5.0.7
isProd is correctly set to true.
const TerserPlugin = require('terser-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
publicPath: '/',
devServer: {
host: 'staging-beta.myDomain.com',
port: 9000,
allowedHosts: 'all',
},
transpileDependencies: ['vuetify'],
chainWebpack: (config) => {
// reducted code
},
configureWebpack: {
devtool: 'source-map',
optimization: {
minimize: isProd,
minimizer: isProd
? [
new TerserPlugin({
minify: TerserPlugin.uglifyJsMinify,
terserOptions: {
compress: {
drop_console: true,
},
output: {
comments: false,
},
},
}),
]
: [],
},
},
};
The correct setup is:
module.exports = defineConfig({
terser: {
minify: 'uglifyJs',
terserOptions: {
compress: {
drop_console: true,
},
},
},
})
You also need to npm install uglify-js
comments under output is deprecated.
I have developed a VUE SPA that employs Vuetify as UI.
The starting project was scaffolded using vue-cli and selecting all standard options.
My current vue.config.js file is as follow:
const path = require("path");
const webpack = require("webpack");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
publicPath: process.env.NODE_ENV == "production" ? "/" : "/",
css: {
sourceMap: true
},
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
https: true
}
},
productionSourceMap: false,
transpileDependencies: [
"vuetify",
"vue2-dropzone",
"vue-echarts",
"resize-detector"
],
configureWebpack: {
devtool: "source-map",
resolve: {
alias: {
//Api: path.resolve(__dirname, "src/api/"),
Components: path.resolve(__dirname, "src/components/"),
Constants: path.resolve(__dirname, "src/constants/"),
Container: path.resolve(__dirname, "src/container/"),
Views: path.resolve(__dirname, "src/views/"),
Helpers: path.resolve(__dirname, "src/helpers/"),
Themes: path.resolve(__dirname, "src/themes/")
//moment: "moment/src/moment"
},
extensions: ["*", ".js", ".vue", ".json"]
},
plugins: [
//jquery plugin
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jquery",
"window.jQuery": "jquery",
jQuery: "jquery"
}),
new BundleAnalyzerPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
optimization: {
splitChunks: {
chunks: "all"
// minSize: 10000,
// maxSize: 200000
}
}
}
};
I would like to add webpack optimization for minifying css/sass, images, js code, woff2 font files (served locally and not from CDN), I suppose that this is not done automatically, am I wrong?
Could you share a basic configuration to achieve what described above (being able to debug code in development)?
Having added also a vue.config.js next to my babel.config.js I realized that the code doesn't get transpiled to ES5 anymore, probably because babel.config.js is fully ignored once there's a vue.config.js (?)
How can I keep babel transpiling the code when building with the presets given while yet having a vue.config.js with other configurations?
babel.config.js
module.exports = {
presets: [['#vue/app', { useBuiltIns: 'entry', corejs: 'core-js#2' }]],
}
vue.config.js
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer = [
new TerserPlugin({
terserOptions: {
// needed for vuex-typex to work in production:
keep_fnames: true,
},
}),
]
}
},
css: {
loaderOptions: {
sass: {
data: `#import "./src/core/style/core/_variables.scss";`,
},
},
},
runtimeCompiler: true,
}
I'm new to react-native. I want to implement webpack for my project. Can anyone suggest a sample webpack config file for react-native
Here's one:
global.__PLATFORM__ = process.env.RN_PLATFORM || 'ios';
module.exports = {
context: __dirname,
entry: {
index: [
'react-native-webpack/clients/polyfills.js',
`./index.${__PLATFORM__}.js`,
],
},
output: {
path: assetsPath,
filename: `[name].${__PLATFORM__}.bundle`,
chunkFilename: '[name].chunk.js',
publicPath: '/',
},
devServer: {
port: 8081,
quiet: false,
noInfo: true,
lazy: true,
filename: `[name].${__PLATFORM__}.bundle`,
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
},
publicPath: '/',
stats: { colors: true },
},
};
Note that a Webpack config is not the only thing you'll need. This guide goes deeper and gives examples and explanations for the next steps:
Babel config
Module support
Assets require support
I have created a app with vue cli. It dev build its working fine with all the routes it has. But when i do production build its always returning to the error route.
In console it's showing this error:
GET http://localhost/ndvc/dist/build/build.js net::ERR_ABORTED
Here is the config/index.js file
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '',
productionSourceMap: false,
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
cssSourceMap: false
}
}