Vue项目打包出现的常见问题

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，显示空白问题

          ******
}

图片无法显示

找到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)
}

样式丢失

在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)

一个正在成长的前端小白~

赏

谢谢你请我吃糖果