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.module.rules.delete('eslint'); }, devServer: { host: '0.0.0.0', port: '80', //public: '0.0.0.0:80', //無效 disableHostCheck: true, } }
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’
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 App Then put your custome into public directory then Custome App ooxxooxx