更改 Snowpack Vue 应用程序中的默认目录

问题描述

我想将

用于我的 Vue 3 应用程序。目前，我已经使用以下命令初始化了 Vue 3 应用程序：

npx create-snowpack-app my-app --template @snowpack/app-template-vue

默认情况下，Snowpack 创建的目录结构如下：

public/
src/
  App.vue
  index.js
package.json
README.md
snowpack.config.js

我需要稍微调整一下。我将现有应用程序移至 Snowpack 的原因。我的挑战是我需要转向这样的结构：

public/
pages/
  App.vue
index.js
package.json
README.md
snowpack.config.js

简而言之：1) 将 src 重命名为 pages 和 2) 将 index.js 移至与 package.json 相同的级别。当我进行此更改时，Snowpack 会发出一条警告，指出“挂载的目录不存在”。它打印出它要查找的文件，Snowpack 显然仍在 src 目录中查找这些文件。我的想法是查看 snowpack.config.js 文件。

我查看了 snowpack.config.js 文件中的 Snowpack。我将 mount.src.url 更改为 /pages。然而，这并没有奏效。我还尝试将属性更改为仅 /，这也不起作用。

要告诉 Snowpack 在当前目录而不是 src 目录中查找 index.js 文件，我需要更改哪些内容？

解决方法

使用将 mount 指定为挂载点的 . 配置可以实现该目录布局：

// snowpack.config.js
module.exports = {
  mount: {
    '.': {url: '/dist'}
  },}

然后根索引可以从 <projectRoot>/pages/ 导入 SFC：

// <projectRoot>/index.js
import App from './pages/App.vue'
...