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

Question

我想在我的Vue 3应用中使用Snowpack。目前，我已经使用以下命令初始化了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文件中的mount property。我将mount.src.url更改为/pages。然而，这并不管用。我还尝试将属性更改为/，但同样不起作用。

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

Answer 1

通过指定.作为挂载点的mount配置，可以实现该目录布局：

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

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

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