Articles under classified WEB development

Record the pit where Node.js failed to build (/bin/sh: vite: no command found error Command failed with exit code 127.)

• Author: Chuwen
• Time: 2023-10-13
• Classification: WEB development
• comment

<trans data-src="## 问题排查">##Troubleshooting</trans> <trans data-src="经过排查是 `vite` 包没安装上，然后我就想到了 `vite` 包是写在 `package.json` 文件的 `devDependencies` 清单中 ">After checking, it is found that the 'vite' package is not installed. Then I think that the 'vite' package is written in the 'devDependencies' list of the' package. json 'file</trans> <trans data-src="最终查看 [yarn 文档](">Final view [yarn document]（</trans> <trans data-src="https://classic.yarnpkg.com/lang/en/docs/cli/install/#toc">https://classic.yarnpkg.com/lang/en/docs/cli/install/#toc</trans> <trans data-src="-yarn-install-production-true-false)发现一个配置项：">-Yarn install production true false) found a configuration item:</trans> <trans data-src="如果环境变量 `NODE_ENV` 设置为 `production`，则会忽略 `devDependencies` 清单中的包">If the environment variable 'NODE_ENV' is set to 'production', the package in the 'devDependencies' list will be ignored</trans> <trans data-src="然后看了一眼流水线环境变量配置，果不其然设置了 `NODE_ENV=production` 这个环境变量，这也印证了为什么构建时提示 `vite` 命令找不到">Then I took a look at the pipeline environment variable configuration, and the environment variable 'NODE_ENV=production' was set as expected, which also confirmed why the prompt 'vite' command could not be found during the construction</trans> <trans data-src="## 解决方案">##Solution</trans> <trans data-src="以下任选一个方案即可">Choose one of the following options</trans> <trans data-src="### 1. ">### 1. </trans> <trans data-src="将 NODE_ENV 环境变量删除">Remove NODE_ENV environment variable</trans> <trans data-src="### 2. ">### 2. </trans> <trans data-src="安装依赖时追加 `--production=false` 参数">When installing dependencies, append the '-- production=false' parameter</trans> <trans data-src="完整示例：`yarn install --production=false`">Complete example: ` yarn install -- production=false`</trans>

Axios Exception Interceptor - Some request custom handling exceptions

• Author: Chuwen
• Time: 2023-02-24
• Classification: TypeScript
• comment

<trans data-src="## 现状">##Current situation</trans> <trans data-src="项目当前的 `request.ts`:">Current 'request. ts' of the project:</trans> <trans data-src="```ts">```ts</trans> <trans data-src="import toast from "./toast"">import toast from "./toast"</trans> <trans data-src="const request = axios.create({">const request = axios.create({</trans> <trans data-src="baseURL: "">baseURL: "</trans> <trans data-src="https://api.nowtime.cc">https://api.nowtime.cc</trans> <trans data-src="",">",</trans> <trans data-src="responseType: "json",">responseType: "json",</trans> <trans data-src="timeout: 12_000">timeout: 12_000</trans> <trans data-src="})">})</trans> <trans data-src="// 响应拦截器">//Response interceptor</trans> <trans data-src="request.interceptors.response.use(">request.interceptors.response.use(</trans> <trans data-src="response => {">response => {</trans> <trans data-src="// TODO 响应拦截器相关操作">//TODO response interceptor related operations</trans> <trans data-src="return response">return response</trans> <trans data-src="},">},</trans> <trans data-src="error => {">error => {</trans> <trans data-src="// 处理网络错误">//Handling network errors</trans> <trans data-src="if (">if (</trans> <trans data-src="error.code === "ECONNABORTED"">error.code === "ECONNABORTED"</trans> <trans data-src="|| error.message === "Network Error"">|| error.message === "Network Error"</trans> <trans data-src="|| error.message.includes("timeout")">|| error.message.includes("timeout")</trans> <trans data-src=") {">) {</trans> <trans data-src="toast("Network timeout", 5e3, true)">toast("Network timeout", 5e3, true)</trans> <trans data-src="return Promise.reject(error)">return Promise.reject(error)</trans> <trans data-src="}">}</trans> <trans data-src="if (error.response) {">if (error.response) {</trans> <trans data-src="// TODO 处理 API 响应的错误">//TODO processing API response error</trans> <trans data-src="const { status } = error.response">const { status } = error.response</trans> <trans data-src="if (status === 500) {">if (status === 500) {</trans> <trans data-src="toast("Server error", 5e3)">toast("Server error", 5e3)</trans> <trans data-src="}">}</trans> <trans data-src="// ......">// ......</trans> <trans data-src="}">}</trans> <trans data-src="return Promise.reject(error)">return Promise.reject(error)</trans> <trans data-src="}">}</trans> <trans data-src=")">)</trans> <trans data-src="export default request">export default request</trans> <trans data-src="```">```</trans> <trans data-src="但是上面的代码有些弊端，比如有一些请求需要自定义处理异常的，并不需要弹出 `toast`，那么我们就需要这么去实现">However, there are some drawbacks in the above code. For example, if there are some requests that need custom exception handling, and 'toast' does not need to pop up, then we need to do so</trans> <trans data-src="## 实现代码">##Implementation code</trans> <trans data-src="新增 `axios.ts` 文件，并粘贴如下代码：">Add the 'axios. ts' file and paste the following code:</trans> <trans data-src="```ts">```ts</trans> <trans data-src="import "axios"">import "axios"</trans> <trans data-src="declare module "axios" {">declare module "axios" {</trans> <trans data-src="// 扩展 AxiosRequestConfig interface">//Extension of AxiosRequestConfig interface</trans> <trans data-src="export interface AxiosRequestConfig {">export interface AxiosRequestConfig {</trans> <trans data-src="catchHandler?: ">catchHandler?: </trans> <trans data-src="boolean;// ">boolean;// </trans> <trans data-src="是否开启自动处理异常">Whether to enable automatic exception handling</trans> <trans data-src="}">}</trans> <trans data-src="}">}</trans> <trans data-src="```">```</trans> <trans data-src="`request.ts`:">`request.ts`:</trans> <trans data-src="```ts">```ts</trans> <trans data-src="import toast from "./toast"">import toast from "./toast"</trans> <trans data-src="const request = axios.create({">const request = axios.create({</trans> <trans data-src="baseURL: "">baseURL: "</trans> <trans data-src="https://api.nowtime.cc">https://api.nowtime.cc</trans> <trans data-src="",">",</trans> <trans data-src="responseType: "json",">responseType: "json",</trans> <trans data-src="timeout: 12_000">timeout: 12_000</trans> <trans data-src="})">})</trans> <trans data-src="// 响应拦截器">//Response interceptor</trans> <trans data-src="request.interceptors.response.use(">request.interceptors.response.use(</trans> <trans data-src="response => {">response => {</trans> <trans data-src="// TODO 响应拦截器相关操作">//TODO response interceptor related operations</trans> <trans data-src="return response">return response</trans> <trans data-src="},">},</trans> <trans data-src="error => {">error => {</trans> <trans data-src="// 处理网络错误">//Handling network errors</trans> <trans data-src="if (">if (</trans> <trans data-src="error.code === "ECONNABORTED"">error.code === "ECONNABORTED"</trans> <trans data-src="|| error.message === "Network Error"">|| error.message === "Network Error"</trans> <trans data-src="|| error.message.includes("timeout")">|| error.message.includes("timeout")</trans> <trans data-src=") {">) {</trans> <trans data-src="toast("Network timeout", 5e3, true)">toast("Network timeout", 5e3, true)</trans> <trans data-src="return Promise.reject(error)">return Promise.reject(error)</trans> <trans data-src="}">}</trans> <trans data-src="// 判断当前请求 config 是否进行同一处理异常">//Judge whether the current request config processes the same exception</trans> <trans data-src="// false：不进行同一错误处理">//False: Do not handle the same error</trans> <trans data-src="if (Object.hasOwn(error.config, "catchHandler") && error.config.catchHandler === false) {">if (Object.hasOwn(error.config, "catchHandler") && error.config.catchHandler === false) {</trans> <trans data-src="return Promise.reject(error)">return Promise.reject(error)</trans> <trans data-src="}">}</trans> <trans data-src="if (error.response) {">if (error.response) {</trans> <trans data-src="// TODO 处理 API 响应的错误">//TODO processing API response error</trans> <trans data-src="const { status } = error.response">const { status } = error.response</trans> <trans data-src="if (status === 500) {">if (status === 500) {</trans> <trans data-src="toast("Server error", 5e3)">toast("Server error", 5e3)</trans> <trans data-src="}">}</trans> <trans data-src="// ......">// ......</trans> <trans data-src="}">}</trans> <trans data-src="return Promise.reject(error)">return Promise.reject(error)</trans> <trans data-src="}">}</trans> <trans data-src=")">)</trans> <trans data-src="export default request">export default request</trans> <trans data-src="```">```</trans> <trans data-src="### 使用：">###Use:</trans> <trans data-src="```ts">```ts</trans> <trans data-src="import request from "./request"">import request from "./request"</trans> <trans data-src="rquest.get(`/v2/user`, {">rquest.get(`/v2/user`, {</trans> <trans data-src="catchHandler: true">catchHandler: true</trans> <trans data-src="})">})</trans> <trans data-src="```">```</trans>

Resolve ECharts deprecated parameter: [ECharts] DEPRECATED: itemStyle.normal.lineStyle is deprecated, use lineStyle instead

• Author: Chuwen
• Time: 2022-09-21
• Classification: WEB development
• comment

<trans data-src="!">!</trans> <trans data-src="[ECharts DEPRECATED: itemStyle.normal.lineStyle is deprecated, use lineStyle instead.](">[ECharts DEPRECATED: itemStyle.normal.lineStyle is deprecated, use lineStyle instead.](</trans> <trans data-src="https://cdn.nowtime.cc/2022/09/21/1491597354.png">https://cdn.nowtime.cc/2022/09/21/1491597354.png</trans> <trans data-src=")">)</trans> <trans data-src="## 原有的配置项">##Original configuration items</trans> <trans data-src="```js">```js</trans> <trans data-src="{">{</trans> <trans data-src="series: [">series: [</trans> <trans data-src="{">{</trans> <trans data-src="itemStyle: {">itemStyle: {</trans> <trans data-src="normal: {">normal: {</trans> <trans data-src="color: "#47C1BF",">color: "#47C1BF",</trans> <trans data-src="lineStyle: {">lineStyle: {</trans> <trans data-src="width: 3// 设置线条粗细">Width: 3//Set line thickness</trans> <trans data-src="}">}</trans> <trans data-src="}">}</trans> <trans data-src="},">},</trans> <trans data-src="}">}</trans> <trans data-src="]">]</trans> <trans data-src="}">}</trans> <trans data-src="```">```</trans> <trans data-src="## 改正后">##After correction</trans> <trans data-src="```js">```js</trans> <trans data-src="{">{</trans> <trans data-src="series: [">series: [</trans> <trans data-src="{">{</trans> <trans data-src="itemStyle: {">itemStyle: {</trans> <trans data-src="color: "#47C1BF",">color: "#47C1BF",</trans> <trans data-src="},">},</trans> <trans data-src="lineStyle: {">lineStyle: {</trans> <trans data-src="width: 3// 设置线条粗细">Width: 3//Set line thickness</trans> <trans data-src="},">},</trans> <trans data-src="}">}</trans> <trans data-src="]">]</trans> <trans data-src="}">}</trans> <trans data-src="```">```</trans>

Error in reading environment variables by Vite.js

• Author: Chuwen
• Time: 2022-09-17
• Classification: TypeScript , WEB development
• comment

<trans data-src="## 背景">##Background</trans> <trans data-src="当我在打包文件后，调试时发现我的环境变量都输出在 JS 中，当时我大为震惊?">When I packaged the file and found that all my environment variables were output in JS during debugging, I was shocked?</trans> <trans data-src="!">!</trans> <trans data-src="[当我用 Vite.js 打包文件后，调试时发现我的环境变量都输出在 JS 中](">[When I package the file with Vite.js, I find that my environment variables are output in JS during debugging]（</trans> <trans data-src="https://cdn.nowtime.cc/2022/09/17/511833052.png">https://cdn.nowtime.cc/2022/09/17/511833052.png</trans> <trans data-src=")">)</trans> <trans data-src="## 解决办法">##Solution</trans> <trans data-src="然后仔细回想，我用的是 `process.env` 去读取环境变量的，我记得在 Vite.js 官方文档中说，只会暴露出 `VITE_` 前缀的环境变量，带着这个疑惑，我又翻看了官方文档：">Then recall that I used 'process. env' to read environment variables. I remember saying in the official Vite.js document that only environment variables with the prefix 'VITE_' would be exposed. With this doubt, I looked through the official document again:</trans> <trans data-src="https://cn.vitejs.dev/guide/env-and-mode.html">https://cn.vitejs.dev/guide/env-and-mode.html</trans> <trans data-src="!">!</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2022/09/17/3888607772.png">https://cdn.nowtime.cc/2022/09/17/3888607772.png</trans> <trans data-src=")">)</trans> <trans data-src="### 恍然大悟">###A sudden realization</trans> <trans data-src="原来是我记错了/搞混了，应该是用 `import.meta.env` 去读取环境变量，然后立即全局替换，将`process.env.` ">It turns out that I remember wrongly/mistakenly. I should use 'import. meta. env' to read environment variables, and then replace them globally immediately`</trans> <trans data-src="替换为 `import.meta.env`">Replace with ` import.meta.env`</trans> <trans data-src="### 再次打包">###Pack again</trans> <trans data-src="再次打包预览后，发现只剩下 `VITE_` 前缀的环境变量了">After packaging and previewing again, it is found that only the environment variables with the prefix 'VITE_' remain</trans> <trans data-src="!">!</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2022/09/17/3137341323.png">https://cdn.nowtime.cc/2022/09/17/3137341323.png</trans> <trans data-src=")">)</trans> <trans data-src="## 可优化的点">##Optimizable points</trans> <trans data-src="我发现打包后，只要在任意地方用到了 `import.meta.env.">I found that after packaging, just use 'import. meta. env</trans> <trans data-src="VITE_*`，就会打包成这样，所以我在很多地方都能够看到">VITE_ * ` will be packaged like this, so I can see it in many places</trans> <trans data-src="```js">```js</trans> <trans data-src="var isPreview = "true" === {">var isPreview = "true" === {</trans> <trans data-src="VITE_APP_ENV: "local",">VITE_APP_ENV: "local",</trans> <trans data-src="VITE_MOCK_LOGIN_UID: "1",">VITE_MOCK_LOGIN_UID: "1",</trans> <trans data-src="VITE_API_URL: "">VITE_API_URL: "</trans> <trans data-src="https://api-.com/v1/">https://api-.com/v1/</trans> <trans data-src="",">",</trans> <trans data-src="VITE_SHOPIFY_API_KEY: "14356af9cc5372",">VITE_SHOPIFY_API_KEY: "14356af9cc5372",</trans> <trans data-src="VITE_DEFAULT_LANG: "en",">VITE_DEFAULT_LANG: "en",</trans> <trans data-src="VITE_ENABLE_HTTP_REPLACE_HTTPS: "true",">VITE_ENABLE_HTTP_REPLACE_HTTPS: "true",</trans> <trans data-src="VITE_EXTENSION_UUID: "c899b-afa8917aa493",">VITE_EXTENSION_UUID: "c899b-afa8917aa493",</trans> <trans data-src="VITE_I18N_DEBUG: "false",">VITE_I18N_DEBUG: "false",</trans> <trans data-src="VITE_COOKIE_NAME_PREFIX: "pg_",">VITE_COOKIE_NAME_PREFIX: "pg_",</trans> <trans data-src="BASE_URL: "/",">BASE_URL: "/",</trans> <trans data-src="MODE: "production",">MODE: "production",</trans> <trans data-src="DEV: !">DEV: !</trans> <trans data-src="1,">1,</trans> <trans data-src="PROD: !">PROD: !</trans> <trans data-src="0">zero</trans> <trans data-src="}.">}.</trans> <trans data-src="VITE_PLUGIN_IS_PREVIEW">VITE_PLUGIN_IS_PREVIEW</trans> <trans data-src="```">```</trans> <trans data-src="这显然不是很好的做法">This is obviously not a good practice</trans> <trans data-src="### 优化办法">###Optimization method</trans> <trans data-src="对此我想到一个简单的优化办法，可以写成如这种：">I think of a simple optimization method, which can be written as follows:</trans> <trans data-src="```ts">```ts</trans> <trans data-src="/* eslint-disable sort-keys,sort-keys-fix/sort-keys-fix */">/* eslint-disable sort-keys,sort-keys-fix/sort-keys-fix */</trans> <trans data-src="const envLists = import.meta.env">const envLists = import.meta.env</trans> <trans data-src="const EnvHelper = {">const EnvHelper = {</trans> <trans data-src="// 自己定义的">//Self defined</trans> <trans data-src="env: envLists.">env: envLists.</trans> <trans data-src="VITE_APP_ENV,">VITE_APP_ENV,</trans> <trans data-src="// vite 自带的判断条件">//Vite's own judgment conditions</trans> <trans data-src="get mode() {">get mode() {</trans> <trans data-src="return envLists.">return envLists.</trans> <trans data-src="MODE">MODE</trans> <trans data-src="},">},</trans> <trans data-src="get isDev() {">get isDev() {</trans> <trans data-src="return envLists.">return envLists.</trans> <trans data-src="MODE === "development"">MODE === "development"</trans> <trans data-src="},">},</trans> <trans data-src="get isProd() {">get isProd() {</trans> <trans data-src="return !">return !</trans> <trans data-src="this.isDev">this.isDev</trans> <trans data-src="},">},</trans> <trans data-src="// /////////">// /////////</trans> <trans data-src="// 自定义">//Custom</trans> <trans data-src="get mockLoginUid() {">get mockLoginUid() {</trans> <trans data-src="return envLists.">return envLists.</trans> <trans data-src="VITE_MOCK_LOGIN_UID">VITE_MOCK_LOGIN_UID</trans> <trans data-src="},">},</trans> <trans data-src="get apiURL() {">get apiURL() {</trans> <trans data-src="return envLists.">return envLists.</trans> <trans data-src="VITE_API_URL">VITE_API_URL</trans> <trans data-src="},">},</trans> <trans data-src="get shopifyApiKey() {">get shopifyApiKey() {</trans> <trans data-src="return envLists.">return envLists.</trans> <trans data-src="VITE_SHOPIFY_API_KEY">VITE_SHOPIFY_API_KEY</trans> <trans data-src="},">},</trans> <trans data-src="get defaultLang() {">get defaultLang() {</trans> <trans data-src="return envLists.">return envLists.</trans> <trans data-src="VITE_DEFAULT_LANG">VITE_DEFAULT_LANG</trans> <trans data-src="},">},</trans> <trans data-src="get enableHttpReplaceHttps() {">get enableHttpReplaceHttps() {</trans> <trans data-src="return envLists.">return envLists.</trans> <trans data-src="VITE_ENABLE_HTTP_REPLACE_HTTPS">VITE_ENABLE_HTTP_REPLACE_HTTPS</trans> <trans data-src="},">},</trans> <trans data-src="get extensionUUID() {">get extensionUUID() {</trans> <trans data-src="return envLists.">return envLists.</trans> <trans data-src="VITE_EXTENSION_UUID">VITE_EXTENSION_UUID</trans> <trans data-src="},">},</trans> <trans data-src="get i18nDebug() {">get i18nDebug() {</trans> <trans data-src="return envLists.">return envLists.</trans> <trans data-src="VITE_I18N_DEBUG">VITE_I18N_DEBUG</trans> <trans data-src="},">},</trans> <trans data-src="get cookieNamePrefix() {">get cookieNamePrefix() {</trans> <trans data-src="return envLists.">return envLists.</trans> <trans data-src="VITE_COOKIE_NAME_PREFIX">VITE_COOKIE_NAME_PREFIX</trans> <trans data-src="},">},</trans> <trans data-src="get pluginIsPreview() {">get pluginIsPreview() {</trans> <trans data-src="return envLists.">return envLists.</trans> <trans data-src="VITE_PLUGIN_IS_PREVIEW">VITE_PLUGIN_IS_PREVIEW</trans> <trans data-src="},">},</trans> <trans data-src="get pluginBuildTime() {">get pluginBuildTime() {</trans> <trans data-src="return envLists.">return envLists.</trans> <trans data-src="VITE_PLUGIN_BUILD_TIME">VITE_PLUGIN_BUILD_TIME</trans> <trans data-src="}">}</trans> <trans data-src="}">}</trans> <trans data-src="export default EnvHelper">export default EnvHelper</trans> <trans data-src="```">```</trans>

Vue 3 labels returned from the rendering backend | Use of component labels and compile

• Author: Chuwen
• Time: 2022-05-13
• Classification: WEB development
• comment

<trans data-src="## 缘由">##Cause</trans> <trans data-src="项目中有一个需求，需要动态渲染后端返回的 HTML，如下所示，下述的**每一个** `svg` 是后端动态返回的">There is a requirement in the project that the HTML returned by the backend should be dynamically rendered, as shown below. The following * * each * * 'svg' is dynamically returned by the backend</trans> <trans data-src="```html">```html</trans> <trans data-src="<template>"><template></trans> <trans data-src="<div class="class-name">"><div class="class-name"></trans> <trans data-src="<!--"><!--</trans> <trans data-src="这里的每一个 svg 都会从 API 返回渲染-->">Each svg here will return rendering from the API --></trans> <trans data-src="<svg></svg>"><svg></svg></trans> <trans data-src="<svg></svg>"><svg></svg></trans> <trans data-src="<svg></svg>"><svg></svg></trans> <trans data-src="</div>"></div></trans> <trans data-src="</template>"></template></trans> <trans data-src="```">```</trans> <trans data-src="试过这样，但是不会渲染出来：">Try this, but it will not render:</trans> <trans data-src="```html">```html</trans> <trans data-src="<template>"><template></trans> <trans data-src="<div class="class-name">"><div class="class-name"></trans> <trans data-src="<template v-html="svg1"></template>"><template v-html="svg1"></template></trans> <trans data-src="<template v-html="svg2"></template>"><template v-html="svg2"></template></trans> <trans data-src="<template v-html="svg3"></template>"><template v-html="svg3"></template></trans> <trans data-src="</div>"></div></trans> <trans data-src="</template>"></template></trans> <trans data-src="```">```</trans> <trans data-src="## 解决方案">##Solution</trans> <trans data-src="通过浏览 Vue.js 文档，发现如下文章：">By browsing the Vue.js document, the following articles are found:</trans> <trans data-src="- [渲染函数 - 模板编译](">-[Render Function - Template Compilation]（</trans> <trans data-src="https://v3.cn.vuejs.org/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6">https://v3.cn.vuejs.org/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6</trans> <trans data-src=" "模板编译")">Template Compilation)</trans> <trans data-src="- [内置特殊元素 - component](">-[Built in special element - component]（</trans> <trans data-src="https://staging-cn.vuejs.org/api/built-in-special-elements.html#component">https://staging-cn.vuejs.org/api/built-in-special-elements.html#component</trans> <trans data-src=")">)</trans> <trans data-src="- [在 Vue.js 中使用 Vue.compile](">-[Use Vue. file in Vue.js]（</trans> <trans data-src="https://stackoverflow.com/questions/68981411/vue3-how-to-use-vue-compile-in-vue3">https://stackoverflow.com/questions/68981411/vue3-how-to-use-vue-compile-in-vue3</trans> <trans data-src=")">)</trans> <trans data-src="### `<component>` 是 Vue 内置特殊元素">###'<component>' is a Vue built-in special element</trans> <trans data-src="> `<component>` 和 `<slot>` 具有类似组件的特性，也是模板语法的一部分。">>'<component>' and '<slot>' have similar component characteristics and are part of the template syntax.</trans> <trans data-src="它们并非真正的组件，同时在模板编译期间会被编译掉。">They are not real components and will be compiled during template compilation.</trans> <trans data-src="因此，它们通常在模板中用小写字母书写。">Therefore, they are usually written in lowercase letters in the template.</trans> <trans data-src="所以，使用 `<component>`、`Vue.compile` 就实现了我想要的功能">Therefore, using '<component>' and 'Vue. file' can achieve the function I want</trans> <trans data-src="gist: ">gist: </trans> <trans data-src="https://gist.github.com/PrintNow/f9fec1890bd736593800564c45584c3b">https://gist.github.com/PrintNow/f9fec1890bd736593800564c45584c3b</trans> <trans data-src="```vue">```vue</trans> <trans data-src="<template>"><template></trans> <trans data-src="<h2>实现效果</h2>"><h2>Achieve results</h2></trans> <trans data-src="<div class="class-name">"><div class="class-name"></trans> <trans data-src="<component :is="getSvg" :style="svg_style"></component>"><component :is="getSvg" :style="svg_style"></component></trans> <trans data-src="<component :is="getSvg" :style="svg_style"></component>"><component :is="getSvg" :style="svg_style"></component></trans> <trans data-src="<component :is="getSvg" :style="svg_style"></component>"><component :is="getSvg" :style="svg_style"></component></trans> <trans data-src="</div>"></div></trans> <trans data-src="<h2><code>getSvg</code> 输出结果：</h2>"><h2><code>getSvg</code>Output result:</h2></trans> <trans data-src="<pre v-text="getSvg"></pre>"><pre v-text="getSvg"></pre></trans> <trans data-src="<h2><code>svg</code> 输出结果：</h2>"><h2><code>svg</code>Output result:</h2></trans> <trans data-src="<pre v-text="svg"></pre>"><pre v-text="svg"></pre></trans> <trans data-src="</template>"></template></trans> <trans data-src="<script>"><script></trans> <trans data-src="import { compile } from "vue";">import { compile } from "vue";</trans> <trans data-src="export default {">export default {</trans> <trans data-src="name: "App",">name: "App",</trans> <trans data-src="components: {},">components: {},</trans> <trans data-src="data() {">data() {</trans> <trans data-src="return {">return {</trans> <trans data-src="svg_style: { width: "64px", height: "auto" },">svg_style: { width: "64px", height: "auto" },</trans> <trans data-src="svg: `<svg t="1652418272564" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="">svg: `<svg t="1652418272564" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="</trans> <trans data-src="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</trans> <trans data-src="" p-id="2045" width="512"">" p-id="2045" width="512"</trans> <trans data-src="height="512">">height="512"></trans> <trans data-src="<path d="M408 617m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z" fill="#C9F4EB" p-id="2046"></path>"><path d="M408 617m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z" fill="#C9F4EB" p-id="2046"></path></trans> <trans data-src="<path d="M927 369H111.75a25 25 0 0 1 0-50H927a25 25 0 0 1 0 50zM569.79 748H225a30 30 0 0 1 0-60h344.79a30 30 0 0 1 0 60zM668 748h-2.84a30 30 0 1 1 0-60H668a30 30 0 0 1 0 60z""><path d="M927 369H111.75a25 25 0 0 1 0-50H927a25 25 0 0 1 0 50zM569.79 748H225a30 30 0 0 1 0-60h344.79a30 30 0 0 1 0 60zM668 748h-2.84a30 30 0 1 1 0-60H668a30 30 0 0 1 0 60z"</trans> <trans data-src="fill="#087E6A" p-id="2047"></path>">fill="#087E6A" p-id="2047"></path></trans> <trans data-src="<path d="M832 860H197A125.14 125.14 0 0 1 72 735V263a125.14 125.14 0 0 1 125-125h635a125.14 125.14 0 0 1 125 125v472a125.14 125.14 0 0 1-125 125zM197 188a75.09 75.09 0 0 0-75 75v472a75.09 75.09 0 0 0 75 75h635a75.09 75.09 0 0 0 75-75V263a75.09 75.09 0 0 0-75-75z""><path d="M832 860H197A125.14 125.14 0 0 1 72 735V263a125.14 125.14 0 0 1 125-125h635a125.14 125.14 0 0 1 125 125v472a125.14 125.14 0 0 1-125 125zM197 188a75.09 75.09 0 0 0-75 75v472a75.09 75.09 0 0 0 75 75h635a75.09 75.09 0 0 0 75-75V263a75.09 75.09 0 0 0-75-75z"</trans> <trans data-src="fill="#087E6A" p-id="2048"></path>">fill="#087E6A" p-id="2048"></path></trans> <trans data-src="</svg>`,"></svg>`,</trans> <trans data-src="};">};</trans> <trans data-src="},">},</trans> <trans data-src="computed: {">computed: {</trans> <trans data-src="getSvg() {">getSvg() {</trans> <trans data-src="return compile(this.svg);">return compile(this.svg);</trans> <trans data-src="},">},</trans> <trans data-src="},">},</trans> <trans data-src="};">};</trans> <trans data-src="</script>"></script></trans> <trans data-src="<style>"><style></trans> <trans data-src=".class-name * {">.class-name * {</trans> <trans data-src="display: block;">display: block;</trans> <trans data-src="}">}</trans> <trans data-src="</style>"></style></trans> <trans data-src="```">```</trans> <trans data-src="<iframe src=""><iframe src="</trans> <trans data-src="https://codesandbox.io/embed/sparkling-fog-2ycfeb?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark">https://codesandbox.io/embed/sparkling-fog-2ycfeb?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark</trans> <trans data-src=""">"</trans> <trans data-src="style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"">style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"</trans> <trans data-src="title="sparkling-fog-2ycfeb"">title="sparkling-fog-2ycfeb"</trans> <trans data-src="allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"">allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"</trans> <trans data-src="sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"">sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"</trans> <trans data-src="></iframe>">></iframe></trans>

1. one
2. two
3. Next »