从CodeSandbox下载的ZIP（Vue.JS页面）index.html生成空白页面

Question

My first ever Vue.JS / Vue2Leaflet app在codeandbox.io上可以正常工作，但是当我下载ZIP并打开index.html文件时，它为空吗？

在它起作用之前，我是否需要对代码库做一些事情（编译？安装其他依赖项？）？我正在寻找可以上传到服务器上的内容...

或者，将其转换为单个.html页面有多困难？ （单个文件组件？）

Answer 1

我不确定该项目的配置方式，但建议您将其转换为默认的@ vue / cli设置。

npm install && npm install -D @vue/cli-service @vue/cli-plugin-babel vue-template-compiler postcss-import postcss-url && npm install core-js

编辑.babelrc，使其仅包含：

{
  "presets": ["@vue/cli-plugin-babel/preset"]
}

• 创建公用文件夹并在其中移动index.html。
• 创建src文件夹，然后将App.vue和index.js移入其中
• 将index.js重命名为main.js
• 编辑main.js，将template: '<App/>', components: { App }替换为render: h => h(App)
• 删除构建和配置文件夹

编辑package.json以添加

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build"
}

并运行npm run serve或npm run build

此外，在App.vue中：

• 将:key="office.id"替换为:key="'office' + office.id"
• 将:key="factory.id"替换为:key="'factory' + factory.id"
• 将:key="warehouse.id"替换为:key="'warehouse' + warehouse.id"

（因为在同一父级中使用相同的键不能拥有相同的组件（l标记）