You want Build time use .env setting context. Two way:
source .env
package.json > “build”: “source .env && nuxt build”
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
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();
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.
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='https://hugo-indol-chi.vercel.app/public/img/nchcbclab.png'
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 Vue AppThen put your custome into public directory then Custome App ooxxooxx
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 ‘#’ 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' ] }
“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.
