vue2项目打包遇到的问题（记录）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2项目打包遇到的问题（记录）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

临时纯手工搭建开发了个vue2小项目，打包后出现了很多问题

一、打包后index.html打开空白

打包后整个页面空白，是因为打包后资源路径不对，需要修改config->index.js下，build属性中assetsPublicPath值为./

module.exports = {
  dev:{...},
  build:{
  	...
  	assetsPublicPath: './',//默认是'/'，需要改为./
  	...
  }
}

二、打包后图片等静态资源无法显示

需要修改build下utils.js文件，新增一句话，大致位置如下，重点看注释处提示：

...
exports.cssLoaders = function (options) {
  ...
  function generateLoaders (loader, loaderOptions) {
      // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
        ,publicPath:'../../'   //新增的部分
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
}

三、打包后凡是router-view的地方都没有加载

打开dist中html文件，打开控制台检查，会发现该显示router-view的地方没有元素，只有一个空注释
需要修改router的默认mode值（默认为hsiotry），改成hash模式文章来源地址https://www.toymoban.com/news/detail-597193.html

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter)

const routes = [
  ...
]
const router = new VueRouter({
  routes,
  mode:"hash" //框架默认生成时，这里是值为hsitory
})

export default router