3

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?

enter image description here

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
    })
  ],
};
6
  • If you want staging to be exactly the same as production, use the same command? Vue's probably doing some sort of if(production) { minify and cache bust } logic.
    – ceejayoz
    Commented Jul 23, 2020 at 15:54
  • I need the environment to change, I have production API and Staging API (the testing version) Commented Jul 23, 2020 at 15:56
  • Use something like an .env file for that.
    – ceejayoz
    Commented Jul 23, 2020 at 15:57
  • But I am using the .env for that, I have .env (for production),.env.staging (for staging) and .env.staging.local, thats the only point of using --mode staging Commented Jul 23, 2020 at 16:02
  • In my setup, it's one .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.
    – ceejayoz
    Commented Jul 23, 2020 at 16:07

1 Answer 1

9

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.