打包上线、图片模块化

打包上线

npm run serve

1. 启动一个web服务器
2. 自动打包（开发环境的包，在内存中运行，不会生成实际文件）
3. 启动后自动打开浏览器添加 --open 命令

npm run build

1. 构建一个生成环境的包(上线的代码)
2. js css文件名添加哈希值的作用：解决缓存问题
3. vue.config.js中的配置项：

• publicPath 配置公共资源的路径
• js css引入路径问题，默认打包出来的是 ‘/’ 根目录(需要部署在服务器根目录)
• js css引入使用使用相对路径 ‘./’ (部署在服务器某个子目录下)

4. <img src="/b1.jpg" alt="">
   这种图片引入方式在打包时，webpack不做任何处理，直接拷贝到项目根目录
5. <img src="../../assets/img/loading4.gif" alt="">
   这种图片引入方式在打包时，webpack会做一些处理（添加哈希值，放到项目中的某个文件夹中）
6. <img src="https://yanxuan.nosdn.127.net/9d8114ce4ef435ceac5e82120efeec4c.png" alt="">
   这种图片引入方式在打包时，webpack不做任何处理，代码的一部分
7. 通过背景图引入图片，和引入public和assets中的图片一样，不推荐
8. 通过模块化管理图片，推荐

// img.js
import ld4 from './img/loading4.gif'
import ld5 from './img/loading5.gif'
import ld6 from './img/loading6.gif'
// 开发环境的基础路径
let baseUrl = '/'
// 生产环境的基础路径
// let baseUrl = './'
// 使用了七牛加速服务的基础路径
// let baseUrl = 'https://www.qiniu.com/qf/webapp/'

export default {
  b1: baseUrl + 'b1.jpg',
  b2: baseUrl + 'b2.jpg',
  ld4,
  ld5,
  ld6,
  wyyx1: 'https://yanxuan.nosdn.127.net/e21381b7e1e7caebbe72488db9542163.gif',
  wyyx2: 'https://yanxuan.nosdn.127.net/9d8114ce4ef435ceac5e82120efeec4c.png'
}

9. 选择history路由模式的配置

const router = new VueRouter({
  routes,
  // mode: 'hash',//默认模式
  mode: 'history',
  base: '/dist/'
})

10. history路由模式的nginx配置
    location /dist {
    try_files $uri $uri/ /dist/index.html;
    }
    所有访问地址中有/dist的访问，统一放回服务器根目录下的dist目录中的index.html

11. 配置数据请求代理