h5 打包到生产，放在三级目录下，路由访问不到。报Uncaught Invariant Violation: Can not find proper registered route for '/xtcapp/v1/defendfarm'

AndyXuan commented 3 years ago

复现仓库

https://gitee.com/xdcls1022/taro 小程序基础库: 没有小程序 使用框架: React

复现步骤

gitee 上的代码没有node_modules,需要自己依赖下
yarn dev:h5 预览没问题正常预览图片： 3.yarn build:h5 打包，把包放在https://media.kaka.cn/xtcapp/v1/defendfarm中打不开报错：

4、这是我的ngix 配置 location ~ /xtcapp/v1/defendfarm { alias /data/www/media.kaka.cn/xtcapp/v1/defendfarm; index index.html try_files $uri /xtcapp/v1/defendfarm/index.html; }

期望结果

build之后的结果和预览结果一致

实际结果

不一致

环境信息

MACdeMacBook-Pro:demo mac$ taro info
👽 Taro v1.3.34

  Taro CLI 1.3.34 environment info:
    System:
      OS: macOS 11.3.1
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.18.3 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.6 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 2.2.17 => 2.2.17 
      @tarojs/components: 2.2.17 => 2.2.17 
      @tarojs/components-qa: 2.2.17 => 2.2.17 
      @tarojs/plugin-sass: 2.2.17 => 2.2.17 
      @tarojs/router: 2.2.17 => 2.2.17 
      @tarojs/taro: 2.2.17 => 2.2.17 
      @tarojs/taro-alipay: 2.2.17 => 2.2.17 
      @tarojs/taro-h5: 2.2.17 => 2.2.17 
      @tarojs/taro-qq: 2.2.17 => 2.2.17 
      @tarojs/taro-quickapp: 2.2.17 => 2.2.17 
      @tarojs/taro-rn: 2.2.17 => 2.2.17 
      @tarojs/taro-swan: 2.2.17 => 2.2.17 
      @tarojs/taro-tt: 2.2.17 => 2.2.17 
      @tarojs/taro-weapp: 2.2.17 => 2.2.17 
      @tarojs/webpack-runner: 2.2.17 => 2.2.17 
      eslint-config-taro: 2.2.17 => 2.2.17 
      eslint-plugin-taro: 2.2.17 => 2.2.17 
      nerv-devtools: ^1.5.7 => 1.5.7 
      nervjs: ^1.5.7 => 1.5.7 
      stylelint-config-taro-rn: 2.2.17 => 2.2.17 
      stylelint-taro-rn: 2.2.17 => 2.2.17 

MACdeMacBook-Pro:demo mac$

补充信息

总感觉是 config 目录下的 index.js 和 prod.js 里面配置不对。但找不出原因。

AndyXuan commented 3 years ago

复现仓库 https://gitee.com/xdcls1022/taro

index.js 下面的配置 `const config = { projectName: 'test', date: '2020-8-24', // designWidth: 2048, // deviceRatio: { // '1280': 3.2 / 2, // '2048': 1, // '1024': 4 / 2 // }, // designWidth: 1024, // deviceRatio: { // '640': 2.34 / 2, // '750': 1, // '828': 1.81 / 2, // '1024': 1.47 / 2, // }, designWidth: 750, deviceRatio: { '640': 2.34 / 2, '750': 1, '828': 1.81 / 2 }, sourceRoot: 'src',

outputRoot: 'xtcapp/v1/defendfarm', //v1 babel: { sourceMap: true, presets: [ ['env', { modules: false }] ], plugins: [ 'transform-decorators-legacy', 'transform-class-properties', 'transform-object-rest-spread', ['transform-runtime', { 'helpers': false, 'polyfill': false, 'regenerator': true, 'moduleName': 'babel-runtime' }] ] }, plugins: [ '@tarojs/plugin-sass', '@tarojs/plugin-terser' ], defineConstants: { }, mini: { // compile: { // exclude: [ // 'nodemodules/taro-chart-f2/src/components/f2-canvas/lib/f2.js' // ] // }, postcss: { pxtransform: { enable: true, config: {} }, url: { enable: true, config: { limit: 10240 // 设定转换尺寸上限 } }, cssModules: { enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true config: { namingPattern: 'module', // 转换模式，取值为 global/module generateScopedName: '[name][local][hash:base64:5]' } } } }, h5: { publicPath: '/', staticDirectory: 'static', esnextModules: ['taro-ui','taro-f2'], output: { filename: 'js/[name].[hash:8].js', chunkFilename: 'js/[name].[chunkhash:8].js' }, miniCssExtractPluginOption: { filename: 'static/css/[name]/[hash].css', chunkFilename: 'static/css/[name]/[hash].css' },

router: {
   mode: 'browser',

   basename: 'xtcapp/v1/defendfarm', //v1
  customRoutes: {
    '/pages/index/index': '/index',
    //TODO: 如需新增新的界面在这里配置新的路由地址

  }
},
postcss: {
  autoprefixer: {
    enable: true,
    config: {
      browsers: [
        'last 3 versions',
        'Android >= 4.1',
        'ios >= 8'
      ]
    }
  },
  pxtransform: {
    enable: true, //设置为false 表示编译的时候px不被转换
  },
  cssModules: {
    enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
    config: {
      namingPattern: 'module', // 转换模式，取值为 global/module
      generateScopedName: '[name]__[local]___[hash:base64:5]'
    }
  }
}

} }

module.exports = function (merge) { if (process.env.NODE_ENV === 'development') { return merge({}, config, require('./dev')) } return merge({}, config, require('./prod')) } `

prod.js 下面的配置 `module.exports = { env: { NODE_ENV: '"production"' }, defineConstants: {}, mini: {}, h5: { publicPath: 'https://media.kaka.cn/xtcapp/v1/defendfarm', //v1 /**

如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
参考代码如下：
webpackChain (chain) {
chain.plugin('analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
} */ } } `

luckyadam commented 3 years ago

basename: '/xtcapp/v1/defendfarm' 试试

AndyXuan commented 3 years ago

basename: '/xtcapp/v1/defendfarm' 试试

我改成这个之后 `router: { mode: 'browser',

   basename: '/xtcapp/v1/defendfarm', //v1
  customRoutes: {
    '/pages/index/index': '/index',
    //TODO: 如需新增新的界面在这里配置新的路由地址

  }
}`

，执行 yarn build:h5后，我重新放到了 https://media.kaka.cn/xtcapp/v1/defendfarm。还是报之前的错误

maodaoyi commented 2 years ago

h5: { publicPath:"/xtcapp/v1/defendfarm/", router: { mode: "browser" basename: "/xtcapp/v1/defendfarm" } } 这样试试

NervJS / taro