Setting Webpack Flags For Ionic Vue

Ionic Framework Ionic Vue
1

I’m getting the following error related to vue-i18n on our production environment.

Uncaught ReferenceError: __INTLIFY_PROD_DEVTOOLS__ is not defined
    at Module.ve (core-base.esm-bundler.js:167)
    at L (vue-i18n.cjs.prod.js:175)
    at g (vue-i18n.cjs.prod.js:204)
    at S (vue-i18n.cjs.prod.js:616)
    at q (vue-i18n.cjs.prod.js:1414)
    at Module.56d7 (index.js:18)
    at u (bootstrap:89)
    at Object.1 (app.ef4d8501.js:1)
    at u (bootstrap:89)
    at n (bootstrap:45)

The vue-i18n plugin recommends these flags be set.

The build will work without configuring these flags, however it is strongly recommended to properly configure them in order to get proper tree shaking in the final bundle. To configure these flags:

How do you set flags like this in Ionic Vue? We currently don’t have webpack.config.js in our project.

2

Looks like the alpha version of vue-i18n fixes the issue so didn’t need to use DefinePlugin or Rollup.

3

Wanted to note that all Ionic Vue apps are automatically configured to use the vue.config.js file if you were to create one. Our starter apps don’t ship with the file since there is no additional configuration needed.

The vue.config.js file lets you customize Webpack: Configuration Reference | Vue CLI

5

I’m running into an environment issue trying to use .env.staging variables.

The repo has NODE_ENV set to staging and NPM_CONFIG_PRODUCTION set to false , however it’s still always using .env.production variables. Here’s what I’m seeing in the build logs.

Creating runtime environment
remote:
remote:        NPM_CONFIG_PRODUCTION=false
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        USE_YARN_CACHE=true
remote:        NODE_DEBUG=false
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=staging
remote:        NODE_MODULES_CACHE=true
...
Building for production...
...
Pruning devDependencies
remote:        Skipping because NODE_ENV is not 'production'

Any ideas @Idebeasi how to deploy to staging environment? Do I need to use vue.config.js somehow? Or do I need to update my package.json to pass $NODE_ENV to the start or build scripts?

6

Figured it out! The trick was passing --mode with $NODE_ENV in my package.json.

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode $NODE_ENV",

Hopefully this helps others when deploying Ionic Vue to different environments. :+1:

1 Like