Hippy-vue是腾讯开发的为前端开发人员设计的跨端框架Hippy的Vue写法,让APP项目平滑迁移到 Web。Hippy-vue打包静态资源404的情况,是由于打包后的dist目录下面的文件,并非放在了你的HTTP SERVER的根目录,就会出现CSS、JS、图片等静态资源404。

Hippy-vue打包静态资源404如何解决?
Hippy-vue打包静态资源404如何解决?

如何调整?参考官网的public配置,是不能完全解决问题。

正确的方法,创建vue.config.js放到Hippy-vue的scripts文件夹下面。

/* eslint-disable */
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : './',
};

package.json中将:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "hippy:debug": "hippy-debug",
  "hippy:dev": "webpack --config ./scripts/hippy-webpack.dev.js",
  "hippy:vendor": "webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
  "hippy:build": "webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js"
},

改为:

"scripts": {
  "serve": "vue-cli-service serve --config ./scripts/vue.config.js",
  "build": "vue-cli-service build --config ./scripts/vue.config.js",
  "lint": "vue-cli-service lint",
  "hippy:debug": "hippy-debug",
  "hippy:dev": "webpack --config ./scripts/hippy-webpack.dev.js",
  "hippy:vendor": "webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
  "hippy:build": "webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js"
},

分享到: