小编rad*_*orz的帖子

vue.config.js我通过如下更改使用 Vue CLI 和 Vue 2 构建了一个多页面应用程序：

pages: {
    index: {
      entry: './src/pages/index/main.js',
      template: 'public/index.html',
      title: 'index page',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    admin: {
      entry: './src/pages/admin/main.js',
      template: 'public/index.html',
      title: 'admin page',
      chunks: ['chunk-vendors', 'chunk-common', 'admin']
    }
},
...

但是如何使用 Vite 和 Vue 3 构建多页面应用程序呢？

这是我的目录结构。我像这样编辑了 vite.config.js：

import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
/**
 * @type {import('vite').UserConfig}
 */
export default {
  plugins: [vue()],
  build:{
    rollupOptions:{
      input:{
        main:resolve(__dirname,'index.html'),
        admin:resolve(__dirname,'src/admin/index.html')
      }
    }
  }
}

但当我构建时它返回错误，并且我无法通过 localhost:3000/admin/index.html 打开管理页面。

在 Vue 2 中，我们只需使用|和即可方便地过滤项目filters。但它不在 Vue 3 中。

正如我们所知\xef\xbc\x8c我们可以使用“计算”​​将一个值更改为另一个值。

但是如何更改数组的值呢？

视图2

<template>\n<ul>\n  <li v-for="(index,value) in array1" :key="index">\n   {{ value | valuefilter}}\n  </li>\n</ul>\n</template>\n

<script>\n...\nexport {\n...\n  filters:{\n    valuefilter(value){\n      return \'$\'+ value\n    }\n  }\n...\n}\n</script>\n

这是我的文件树：

|-package.json\n|-vite.config.js\n|-pages/\n|--main/\n|---index.html\n|---main.js\n|--admin/\n|---index.html\n|---main.js\n

我们知道我们可以通过这种方式创建多页面：

\n
• 如何通过vite2和vue3\xef\xbc\x9f构建多页面应用程序
\n

但是如果我尝试更改文件的结构，则在运行脚本时无法通过 localhost:3000 访问 index.html 页面或通过 url (localhost:3000/admin/index.html) 访问pages/admin/index.html (维特）。

其实我只是想把文件放在一起，所以我改变了vite.config.js中的文件结构和路径，结果页面没有出来。

// vite.config.js\nconst { resolve } = require(\'path\')\n\nmodule.exports = {\n  build: {\n    rollupOptions: {\n      input: {\n        main: resolve(__dirname, \'pages/main/index.html\'),\n        admin: resolve(__dirname, \'pages/admin/index.html\')\n      }\n    }\n  }\n}\n

我使用安装了 @mdi/font npm i @mdi/font

但是我如何将它导入到我的 vue3 项目中呢？vite返回警告：

[vite] dependency @mdi/font declares non-existent entry file D:\xxxx\node_modules\@mdi\font\index.js.

我应该怎么做才能像这样使用 mdi 图标 <span class="mdi mdi-account-heart" aria-hidden="true"></span>

比如cubejs：

<script>
  var cubejsApi = cubejs(
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE1NTIzOTk5MjcsImV4cCI6MTU1MjQ4NjMyN30.SOO-A6GfGH7ar3EoeBb0cjj10BVxO3ffjvmqQziXIZA',
    { apiUrl: 'http://localhost:3000/cubejs-api/v1' }
  );
 ...
</script>

比如vue或者nodejs的例子现在我应该使用'var'吗？

我将图像放在公共目录（其中包含index.html）中，然后使用 url() 制作背景，如下所示：

.login-container {
  background-image: url('/static/image1.png'),url('/static/image2.png');
}

但 vue-cli5 说 Can't resolve '/static/images/login_bg.jpg' in '...\views\login'

我该如何解决这个问题？当我使用 vue-cli 4 时它可以工作。

环境：

• vue 2.6.12

• vscode 1.56.2

• 更漂亮 v6.4.0

当我使用 Prettier 格式化我的代码时，它将返回

<el-tab-pane
  v-for="(tab, index) in tabs"
  :key="index"
  :label="tab.title"
  :name="tab.name"
  >{{ tab.title }}</el-tab-pane
>

但我实际上想要这个，所以我只能手动更改它：

<el-tab-pane
  v-for="(tab, index) in tabs"
  :key="index"
  :label="tab.title"
  :name="tab.name"
>
  {{ tab.title }}
</el-tab-pane>

我可以使用 prettier 来实现这个目标吗？

我的更漂亮的配置是：

module.exports = {
  semi: false,
  singleQuote: true,
  tabWidth: 2,
  bracketSpacing: true,
  endOfLine: 'auto',
  printWidth: 80,
  trailingComma: 'none',
  arrowParens: 'always',
  proseWrap: 'preserve',
  jsxBracketSameLine: true
}

我想使用 vite 将我的 esm js 打包到 commonjs，但它会清除节点模块。\nvite.config.js

import { defineConfig } from \'vite\';\n\nconst config = defineConfig({\n  envDir: process.cwd(),\n  build: {\n    lib: {\n      entry: \'index.js\',\n      formats: [\'cjs\']\n    },\n    rollupOptions: {\n      output: {\n        entryFileNames: \'[name].cjs\'\n      }\n    },\n    emptyOutDir: true\n  }\n});\n\nexport default config;\n

我的示例index.js

import Stream from \'node:stream\';\nconsole.log(`\xe2\x9c\xa8`, `Stream`, Stream);\n

构建后，流将是一个空对象。

如何防止节点模块被清理？

如何将esm与电子16一起使用？

当我将 package.json 中的类型设置为 module 时，脚本electron .无法正常工作。

{
  "name": "electronapp",
  "version": "1.0.0",
  "main": "main.js",
  "type": "module",
...
}

如果我们不需要expiredIn，只需使用这种方式我可以创建一个令牌

const token = await reply.jwtSign(userJSON)

但我想给出一个应该禁用令牌的时间：expiredIn！我应该怎么做才能给出过期时间。