更改 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 在当前目录而不是 src 目录中查找 index.js 文件？

Answer 1

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

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

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

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

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

Change default directory in Snowpack Vue app

vue.js

snowpack