My app has 3 enviornments, which changes the API base url:
• Production
• Staging
• Local
When building my app for production I use the $ vue-cli-service build
which builds everything the way it should, perfect!
When building for staging I use $ vue-cli-service build --mode staging
and this brings me some issues:
• My files have different compressing style from production;
• My files aren’t hashed containing the [name].[hash].[extension]
• My service-worker isn’t generated by registerServiceWorker at root.
How can I set my staging build to the exact same build that I use in production?
My webpack config
const path = require("path");
const webpack = require("webpack");
const WebpackAssetsManifest = require('webpack-assets-manifest');
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ["vue-style-loader", "css-loader", "sass-loader"]
},
{
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true
}
},
{
test: /\.(csv|xlsx|xls)$/,
loader: 'file-loader',
options: {
name: `files/[name].[ext]`
}
}
],
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]-[hash].js',
chunkFilename: '[id]-[chunkhash].js',
},
plugins: [
new WebpackAssetsManifest({
publicPath: process.env.VUE_APP_FRONTEND_ROOT_URL,
}),
new webpack.DefinePlugin({
"API_URL": process.env.VUE_APP_FRONTEND_ROOT_URL
})
],
};
I found the solution after 3 days of research, it's so simples it makes me crazy.
In my .env.staging
file I just needed to rewrite NODE_ENV
to production, that way I would have my API running as staging and my production config would run as normal.
NODE_ENV=production
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With