nuxt3 build .env !!

You want Build time use .env setting context. Two way:

1. source .env

package.json > "build": "source .env && nuxt build"

2. eval $(grep '^NUXT_' .env)

package.json > "build": "eval $(grep '^PROD_' .env) && nuxt build"

^RROD_ can replace by yourself

.env file inside

PROD_API_URL=https://ooxxooxx

nuxt 3 $fetch x-www-form-urlencode blob

file download

  const pdf = async () => {
    const download_url = new URL("/api/pdf")
    download_url.search = new URLSearchParams({'order_id': '20241101001'}).toString();
    
    try {
      const blob = await $fetch(download_url.toString(), {
        method: 'GET',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      })
    
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.setAttribute('download', '20241101001.pdf');
      document.body.appendChild(link);
      link.click()

      document.body.removeChild(link);
    } catch (error) {
      console.log(error)
    }
  }

file print

  var iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = url;
  document.body.appendChild(iframe);
  iframe.contentWindow.focus();
  iframe.contentWindow.print();

Replace uglifyjs-webpack-plugin with terser-webpack-plugin

https://github.com/vuejs/vue-cli/issues/2245

https://github.com/webpack-contrib/terser-webpack-plugin

https://stackoverflow.com/questions/57360588/how-to-use-terser-with-webpack

https://juejin.im/post/5cbc40ea6fb9a068b65e2aa6

npm install npm install terser-webpack-plugin

vue.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    chainWebpack: process.env.NODE_ENV === 'production'
    ? config => {
        config.module.rules.delete('eslint');
        config.optimization.minimizer([
            new TerserPlugin({
                terserOptions: {
                    parse: {
                      ecma: 8
                    },
                    compress: {
                      ecma       : 5,
                      warnings   : false,
                      comparisons: false,
                      inline     : 2
                    },
                    mangle: {
                      reserved: ["BigInteger","ECPair","Point"],
                      safari10: true
                    },
                    output: {
                      ecma      : 5,
                      comments  : false,
                      ascii_only: true
                    }
                },
                cache: true,
                parallel: true,
                sourceMap: false, // false 可以減少一半的js大小，sourceMap為除錯使用
            })
        ]);
    }
    : config => {
        config.module.rules.delete('eslint');
    },
    devServer: {
        host: '0.0.0.0',
        port: '80',
        //public: '0.0.0.0:80',  //無效
        disableHostCheck: true,
    }
}

vue 3 image assets

Vue template Code

src/ooxx/ooxx/xx.vue

assets

File location：assets/img/tt.png

OK

Code：
img src='@/assets/img/tt.png'

Become：
img src="/img/tt.f3b936ef.png"

Failed

Code：
img src='@/img/nchcbclab.png'

img src='assets/img/tt.png'
img src='./assets/img/tt.png'
img src='../assets/img/tt.png'

img src="require('assets/img/tt.png') "
img src="require('./assets/img/tt.png') "
img src="require('../assets/img/tt.png') "

public

File location：public/img/tt.png

OK

Code：
img src= '/img/nchcbclab.png'

Become：
img src= '/img/nchcbclab.png'

Failed

Code：
img src= 'img/nchcbclab.png'

img src= 'public/img/nchcbclab.png'
img src='/public/img/nchcbclab.png'

vue 3 index.html

old vue index.html just copy to public directory.

If public don't have index.hmtl, be craeted by run "npm run serve". But public don't have index.html.
Only "npm run build" create index.html in dist driectory.

More easy understand way：

You delete all project index.html. This time still can run "npm run serve". Watch Website source code <title>Vue App</title>

Then put your custome into public directory then <title>Custome App ooxxooxx </title>

vue babel 7

https://github.com/storybookjs/storybook/issues/5298
https://github.com/webpack/webpack/issues/4039
https://github.com/gmfe/Think/issues/67

Cannot assign to read only property 'exports' of object '#<Object>'

babel.config.js

 'sourceType': 'unambiguous', // 自动推断编译的模块类型(cjs,es6)
 'ignore': [/@babel[/\\]runtime/], // 忽略 @babel/runtime

Full code

module.exports = {
  'sourceType': 'unambiguous', // 自动推断编译的模块类型(cjs,es6)
  'ignore': [/@babel[/\\]runtime/], // 忽略 @babel/runtime
  presets: [
    '@vue/app'
  ]
}

vue 3 vue-cli-service serve vue.config.js package.json docker

"serve": "vue-cli-service serve",

Some page modify vue-cli-service serve --host 0.0.0.0 --port 8978

This may in docker failed.

Error: listen EADDRNOTAVAIL: address not available

So some page modify vue.config.js

Use public is Failed!!

    devServer: {
        public: '0.0.0.0:80', 
        disableHostCheck: true,
    }

Use host port is Correct!!

module.exports = {
    chainWebpack: config => {
        config.module.rules.delete('eslint');
    },
    devServer: {
        host: '0.0.0.0',
        port: '80',
        //public: '0.0.0.0:80',  //無效
        disableHostCheck: true,
    }
}

PS：
．Put eslint is maybe get some eslint error, not about host ip port.
．disableHostCheck can remove for try by yourself env.

vue

[Vue.js] 簡單登入頁面路由part1
https://yuugou727.github.io/blog/2017/11/11/vue-login-practice/

[Vue.js] 簡單登入頁面路由part2
https://yuugou727.github.io/blog/2017/11/14/vue-login-practice-2/



[Vue.js] global method 的復用

https://yuugou727.github.io/blog/2017/11/25/vue-global-methods/

vue 模塊 2

https://zhuanlan.zhihu.com/p/22945985


ECMAScript目前包含一个名为ECMAScript 6 module loader API 的解决方案。简单来讲，这个解决方案允许你动态加载模块并缓存。

https://link.zhihu.com/?target=https%3A//github.com/ModuleLoader/es6-module-loader

vue 模塊

https://zhuanlan.zhihu.com/p/22890374

原生JS

REST Client

https://marketplace.visualstudio.com/items?itemName=humao.rest-client

vue watch v-for

Very easy things, but need some way to pass this difficult.


Problme is async await   if your problem  is this, now see how to do


1. template or web html

．any input v-model="filter_keywork"

．<p v-for="r in results"> {{r.aaa}} {{r.bbb}} </p>


2. var app   data:{
  filer_keywork: '',
  resuls: [],
}


3. methods:{
  getrows(){
    this.axios or any http get
  },
  async filteredRows(){
    this.results = await this.getrows()
  }
}

4.watch: {
  filter_keywork: function(){
    this.filteredRows()
  }
}



Watch filter_keywork changed to call method this.fileredRows().

This time methods can us async await get back resuls => this.results Then vue render. No async await .... vue sleep.