Vue项目打包出现的常见问题_/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js' doe

1.index.html访问空白

在config/index.js文件中修改配置assetsPublicPath，把assetsPublicPath: '/'，改成assetsPublicPath: './'

build: {
          // Template for index.html
          index: path.resolve(__dirname, '../dist/index.html'),
 
          // Paths
          assetsRoot: path.resolve(__dirname, '../dist'),
          assetsSubDirectory: 'static',
          assetsPublicPath: './', // 解决打包后，访问html，显示空白问题
 
          ******
}

2.图片无法显示

找到build/utils.js，搜索use: loaders，下面添加publicPath: '../../'

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
    return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../', // 解决图片无法显示问题
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

3.样式丢失

在main.js修改导入包的顺序，将路由包放到最后

import Vue from 'vue'
import App from './App'
import store from './store'
import 'babel-polyfill'
import apiBaseUrlConfig from './global/apiBaseUrlConfig'
// 引入elementUI
import ElementUI from 'element-ui'
import utils from './global/utils'
 
// 引入自写公共组件
import '@/components/common'
 
// 自定义icon
import '@/assets/css/system_Setting/iconfont.css'
import Axios from 'axios'
 
import router from './router' // 解决样式丢失问题
 
Vue.use(apiBaseUrlConfig)
Vue.use(ElementUI)