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
})
],
};
if(production) { minify and cache bust }
logic..env
, with different contents on staging where appropriate. Not in version control. Again, it's likely Vue has various "if we're in production, do this step" built in to the CLI.