寻求适配Parcel 1.7.x的Vue项目搭建示例资源

我之前折腾Parcel 1.x和Vue的时候也踩过类似的坑，给你几个实用的方向来解决：

手动搭建最小可运行模板 #

其实不用找现成的示例，自己搭一个最小模板反而更靠谱，步骤很简单：

• 初始化项目：npm init -y
• 安装依赖：npm install parcel-bundler vue@2.6.x --save-dev（注意选Vue 2.6.x版本，Parcel 1.x对Vue 3支持不佳）
• 创建根目录的index.html：

  <!DOCTYPE html>
  <html>
    <body>
      <div id="app"></div>
      <script src="./src/app.js"></script>
    </body>
  </html>
  

• 创建src/app.js：

  import Vue from 'vue'
  import App from './App.vue'
  
  new Vue({
    el: '#app',
    render: h => h(App)
  })
  

• 创建src/App.vue：

  <template>
    <div>
      <h1>Hello Parcel + Vue!</h1>
    </div>
  </template>
  
  <script>
  export default {}
  </script>
  

• 在package.json里添加脚本：

  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }
  

  运行npm run dev就能启动项目了，这个模板是完全适配Parcel 1.7.x的。

从官方仓库历史版本找对应示例 #

官方examples的master分支现在可能是针对新版本的，但你可以去仓库的历史提交里找Parcel 1.7.x时期的Vue示例：

• 打开官方examples仓库，切换到tags或者直接搜索历史commit，找到Parcel 1.7.x发布前后的提交记录，就能拿到当时的Vue示例代码，直接clone下来就能用。

社区维护的旧版模板 #

不少开发者会在GitHub上分享自己验证过的Parcel 1.x + Vue启动模板，搜索关键词比如parcel 1.x vue starter或者parcel-bundler vue 2 template，就能找到很多个人维护的最小模板，这些模板都已经解决了常见的适配问题，直接拿来用就行。

排查常见错误小技巧 #

如果搭建中还是遇到错误，大概率是这几个原因：

• 不要额外安装Vue相关的Parcel插件（比如parcel-plugin-vue），Parcel 1.x原生支持Vue，装了插件反而会冲突
• 确保Vue版本是2.x，Parcel 1.x对Vue 3的语法和组件解析支持不好
• 检查文件路径是否正确，Parcel对相对路径的解析比较严格，避免路径错误导致的加载失败

内容的提问来源于stack exchange，提问作者Alexander Nestorov