vue配置、vue打包白屏,图片加载不出等问题

1.创建完成一个项目后，原始的项目结构如下

初始项目结构如下：

┌── build                           // webpack相关配置文件
│   ├── build.js                    // webpack打包配置文件
│   ├── check-versions.js           // 检查npm,nodejs版本
│   ├── dev-client.js               // 设置环境
│   ├── dev-server.js               // 创建express服务器，配置中间件，启动可热重载的服务器，用于开发项目
│   ├── utils.js                    // 配置资源路径，配置css加载器
│   ├── vue-loader.conf.js          // 配置css加载器等
│   ├── webpack.base.conf.js        // webpack基本配置
│   ├── webpack.dev.conf.js         // 用于开发的webpack设置
│   └── webpack.prod.conf.js        // 用于打包的webpack设置
│
├── config                          // 项目基本设置文件夹，主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api 等。
│   ├── dev.env.js                  // 开发配置文件，
│   ├── index.js                    // 配置主文件
│   └── prod.env.js                 // 编译配置文件
│
├── node_modules                    // 项目依赖包文件夹
├── src                             // 我们的项目的源码编写文件（里面的文件可根据喜好，随意更改）
│   ├── assets                      // 初始项目资源目录
│   │     └── logo.png
│   ├── components                  // 组件目录
│   │     └── Hello.vue             // 测试组件，回头删除
│   ├── router                      // 路由配置文件夹
│   │     └── index.js              // 路由配置文件   
│   ├── App.vue                     // 入口组件，pages 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用；
│   └── main.js                     // 入口 js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等。
│
├── static                          // 资源放置目录,静态资源文件夹，放置不会变动的资源，直接被复制到最终的打包目录（默认是dist/static）下                  
├── .babelrc:                       // 使用 babel 的配置文件，用来设置转码规则和插件；
├── .editorconfig:                  // 编辑器配置(代码的规范文件，规定使用空格或 tab 缩进，缩进的长度是两位还是四位之类的代码风格，使用的话需要在编辑器里下载对应的插件)；
├── .eslintignore:                  // 指定 eslint 忽略的文件；
├── .eslintrc:                      // 配置 eslint 的检测规则，强制按照规则书写代码
├── .gitignore:                     // 指定 git 忽略的文件，所有 git 操作均不会对其生效；
├── .postcssrc:                     // 指定使用的 css 预编译器，里面默认配置了 autoprefixer ，自动补全浏览器前缀；
├── index.html:                     // 首页文件，项目运行的时候，会自动将我们在 src 文件夹里生成的组件插入这个文件里；
├── package-lock.json               // npm5 新增文件，优化性能
├── package.json                    // 项目依赖包配置文件（node配置文件）
└── README.md                       // 项目说明文档

 2.build文件配置--utils.js

/* 打包配置,解决打包后 static 中文件引入错误 */
if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader',
      publicPath:"../../"            //(默认没有)添加这一句后就可解决图片加载不出的问题(static中文件引用错误)
    })
  } else {
    return ['vue-style-loader'].concat(loaders)
  }
}

3.confi文件配置--index.js

//找到下面两个对象中的内容，进行修改（跨域代理，后面会有专门章节讲解）
dev:{
  //......
  proxyTable: {                     // 使用代理解决跨域问题
    '/api': {
      target: 'http://sw.api.com',  // 你接口的域名(基路径)
      changeOrigin: true,
      pathRewrite:{
          '^/api':''
      }
    }        
  }
  //......
  host: 'localhost', // 可自定义域名
  port: 8080, // 可自定义端口号（一般在多端运行时端口号冲突时使用）
  autoOpenBrowser: true,// 默认false，设为true，每次使用npm run dev 时自动打开浏览器
},
build: {
  //......
  assetsPublicPath: './',          //修改为 './' 解决打包后路径错误
  productionSourceMap: false,      //改为 false 打包时不生成 .map 文件
  //......
  index: path.resolve(__dirname, '../dist/index.html'),// 打包的文件启动路径（跟下面的文件名一致）
  assetsRoot: path.resolve(__dirname, '../dist'),   // 打包的文件名，默认打包成dist文件，可自定义打包名，上面的index路径中的dist要修改
}

4.关于首页加载白屏问题以及图片加载异常

1、修改一下 config/index.js 中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。
    assetsPublicPath默认的是  ‘/’  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ ’

build: {
  //......
  assetsPublicPath: './',          //修改为 './' 解决打包后路径错误
  productionSourceMap: false,      //改为 false 打包时不生成 .map 文件，加快打包速度
  //......

}

2. 还需要注意一点。src里边  router/index.js  路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面,可以点击下面的链接查看history设置方法：vue history 模式（路由）

const router = new Router({
	//module: 'history',  // 默认即可. 默认hash
	routes: []
})

3、图片出不来
    css文件是从当前文件夹下往里寻找static/img/XXX.png，要知道static文件夹是在dist根目录下边的，因此，我们需要修改build的全局配置，改变css文件的文件请求路径。css文件在static里边的css文件夹中，因此需要先‘../../’出到dist根目录下，然后再static/img/XXX.png，就可以正确找到对应的图片文件。
    修改build/utils.js文件。

 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:"../../"    //默认没有这一句，添加这一句后就可解决图片加载不出的问题
      })
 } else {
      return ['vue-style-loader'].concat(loaders) 
 }

传送门： 

vue 完整项目配置1(下载/安装)

vue项目配置3-router路由配置，元信息meta的使用-登录拦截验证

vue项目配置4-Vuex状态管理-Vuex使用详解

vue项目配置5-axios请求 配置