F-loat / mpvue-entry

⛓️ 集中式页面配置,统一构建入口,支持新增页面热更新
MIT License
353 stars 56 forks source link

无法正常打包输出,只打包了json文件 #69

Closed Kellercai closed 6 years ago

Kellercai commented 6 years ago
"mpvue-entry": "^1.5.2",
"mpvue-loader": "^1.1.2",

输出目录只有json文件 image

项目第一次配置mpvue-entry

// webpack.base.conf.js
const MpvueEntry = require('mpvue-entry')
entry = MpvueEntry.getEntry('./src/pages.js')

module.exports = {
  entry,
  ......
}

plugins: [
    new MpvuePlugin(),
    new MpvueEntry(),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: path.resolve(__dirname, '../dist/static'),
        ignore: ['.*']
      }
    ])
  ]

文件目录也有所调整如下: image

编译报错: image

跑线上的F-loat/mpvue-quickstart模版,dist目录文件正常。就算把模板的build所有文件覆盖到项目里面,仍然会出现这个问题。求大大解答。

F-loat commented 6 years ago

文件路径不对吧,@/xxx 要对应 src/xxx.vue 或 src/xxx/index.vue 的

Kellercai commented 6 years ago

@F-loat 路径是正确的,只是之前自定义过路由,如下:

// pages.js
module.exports = [
  {
    path: '/pages/my/my'                                 // 个人中心
  },
 {
    path: '/pages/my/order-list/order-list'              // 我的订单
  }
]

对应的路径目录: image

大大,像这种情况该如何解决路由自定义呢?mpvue-entry里面有路由可配置项吗?

F-loat commented 6 years ago

path: '/pages/my/order-list' 不就行了,干嘛多加一个

F-loat commented 6 years ago

目前文件路径和路由是同一个参数配置的,有需求的话可以加个路由的配置项

Kellercai commented 6 years ago

@F-loat 这是之前项目遗留的问题,有一些demo可以参考吗?

F-loat commented 6 years ago

那个模板生成的项目有分包的示例的

Kellercai commented 6 years ago

@F-loat 可以发一个link过来吗?我这边定位不到位置。感激不尽了

F-loat commented 6 years ago

@Kellercai 你把 path 改成 '/pages/my/order-list' 这样试试看还有问题没

Kellercai commented 6 years ago

@F-loat 你好,打包成功了,只是打包生成路径还是存在一些问题。css和js并不是分别在页面内部,而是全部独立分别放在一个文件夹里面。还有页面json和wxml文件并不是放在当前目录下面,应该是打包配置的问题,如图: image 编辑器报了错: image

F-loat commented 6 years ago

打包配置你根据官方文档自己修改就行,或者用我的模板重新生成下

Kellercai commented 6 years ago

@F-loat path路由更改之后(例如path: '/pages/my/my'改为path: '/pages/my'),就不兼容旧项目了,有什么办法可以解决这个问题吗?

// 配置 pages.js
module.exports = [
  {
    path: '/pages/my'                             
  },
 {
    path: '/pages/my/order-list'              
  }
]
// 打包出来 dist/app.json
{
  "pages": "/pages/my",
  "pages": "/pages/my/order-list",
}
F-loat commented 6 years ago

晚点我加个 route 属性,最后生成的路径由这个属性决定

Kellercai commented 6 years ago

@F-loat 你好大大,可以给个大概的时间吗?我们目前项目包过大了,下一个版本就要上不了了。之前尝试过用mpvue官方的分包方式,但是那种方式对目录的改动太大了,怕会影响项目所以就放弃那种方式。

F-loat commented 6 years ago

最晚周末吧,改动也不是太多,欢迎 pr

F-loat commented 6 years ago

@Kellercai 安装 git 上最新这个试试 npm i -D https://github.com/F-loat/mpvue-entry

// 生成文件位于 `dist/pages/news/list/main` 目录下,通过 `/pages/news/list/main` 路径即可跳转
module.exports = [
  {
    path: 'pages/news/list',
    route: 'pages/news/list/main',
  }
]
Kellercai commented 6 years ago

@F-loat 编译成功了,所有页面引用js文件却错了,项目还是跑不起来 生成目录: image

报错: image

F-loat commented 6 years ago

更新下 webpack-mpvue-asset-plugin 这个依赖

Kellercai commented 6 years ago

终于成功了,nice,只是在pages.js文件的config会报错,然后阻碍了下一步骤的执行。官方的模版倒不会。

// src/pages.js
module.exports = [
  {
    route: 'pages/index/index',                          // 首页
    path: 'pages/index',
    config: {
      navigationBarTitleText: '首页',
      navigationBarBackgroundColor: '#7E73FF',
      navigationBarTextStyle: '#FFFFFF',
      enablePullDownRefresh: true
    }
  }]

image

还有就是,mpvue-entry会在近期更新一个稳定版本吗?

F-loat commented 6 years ago

。。上一行被注释了是什么鬼,你把他直接删了吧

Kellercai commented 6 years ago

这一行代码并不是我手动写进去的,应该是打包生成的 // export default {

F-loat commented 6 years ago

你的代码里没有这个吗

Kellercai commented 6 years ago

@F-loat 是的哦,打包生成的json文件也是正常的,只是编译过程报了这个错

F-loat commented 6 years ago

你的 main.js 发一下

Kellercai commented 6 years ago

@F-loat 你提醒了我,原来是main.js有那个注释,所以编译失败了,但是这应该需要优化一下。 这是main.js文件的注释 image

非常感谢你的帮助,希望这个项目可以做的很棒。

F-loat commented 6 years ago

目前基于正则替换的,很难完全避免

Kellercai commented 6 years ago

有个问题还可以优化一下,就是在pages.js设置分包时出现报错时,改好代码之后,打包出来的subPackages并不会自动去编译我改好的代码。打断编译重新跑一次才可以。 image

F-loat commented 6 years ago

热更新问题在另一个 issue 讨论吧