vue-cli3.0+ 实战总结

1.打包导出路径
使用npm run build，如果使用默认，而不去创建与配置vue.config.js，则默认路径相对 /
如果打包文件要放在子目录，例如： https://www.aaa.com/my-app/，则设置 publicPath 为 /my-app/
如果希望打包文件可以部署任意路径，则需要相对自身，则设置 publicPath 为 '' 或者 './'

publicPath: process.env.NODE_ENV === 'production' ? './' : '/',

2.关闭eslint、可以使用vue ui命令，在可视化界面，导入项目，通过eslint配置，关闭校验
也可以在项目根路径，创建.eslintignore文件

**/*.js
**/*.vue

3.针对 vue.config.js 优化导出配置信息 （取消发布错误log详细位置）

module.exports = {  
    productionSourceMap: false,
}

4.针对 vue.config.js 修改测试端口

module.exports = {  
  devServer: {
      port:8081
  }     
}

5.通过配置vue.config.js，改变导出页面标题

module.exports = {  
  configureWebpack: {
    name: "白噪音-倾听大自然和谐之声"
   }
}

public/index.html

<title><%= webpackConfig.name %></title>

6.动态读取icon文件，并生成对应class
6-0.将svg文件放在 src/icons/svg/目录
6-1.通过vue.config.js配置、创建新的icon规则，通过svg-sprite-loader来解析文件，配置svg的ID形式为 icon-[name]
安装 npm install svg-sprite-loader -D

const path = require('path');
function resolve(dir){
    return path.join(__dirname,dir);
}

module.exports = {  
    ...,
    chainWebpack: config => {
        //icons文件夹内 不做vue-cli默认svg处理
        config.module.rule('svg')
            .exclude.add(resolve('src/icons'))
            .end();
        //icons文件夹内 新设立规则icon 做第三方包的svg处理   
        config.module.rule('icon')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({symbolId:'icon-[name]'})  //使用图标名称格式 icon-xx
            .end()
    },
    ...
}

6-2.创建单文件组件，渲染svg使用 src/components

<template>
    <svg 
        :class="svgClass" 
        aria-hidden="true" 
        v-on="$listeners"
    >
        <use :xlink:href="iconName" />
    </svg>
</template>

<script>
export default {
    name: 'SvgIcon',
    props:{
        iconClass:{
            type:String,
            required:true
        },
        className:{
            type:String,
            default:''
        }
    },
    computed:{
        iconName(){
            return `#icon-${this.iconClass}`
        },
        svgClass(){
            if(this.className){
                return 'svg-icon '+this.className
            }else{
                return 'svg-icon'
            }
        }
    }
}
</script>

<style scoped>
.svg-icon { width:1em; height:1em; vertical-align:-0.15em; fill:currentColor; overflow: hidden;}    
</style>

6-3.控制svg的脚本 - 自动引入svg资源文件 - src/icons/index.js

import Vue from 'vue'
import SvgIcon from '@/components/svgicon.vue'

//全局引用
Vue.component('svg-icon',SvgIcon);

//参数  相对目录、是否嵌套子文件夹、匹配文件正则
const req = require.context('./svg',false,/\.svg$/);

//自动加载键名对应的文件
//req.keys()  返回值类似 ['qq.svg','wx.svg']
req.keys().map(req);

6-4.main.js 引入控制svg的脚本

import './icons/index.js';

6-5.使用组件

<svg-icon icon-class="bird"></svg-icon>

• 验证，通过浏览器调试工具，可以看到生成的样式

  
  svg生成的class
  svg实际效果

7.查看所有vue-cli打包规则
vue inspect -- 所有配置
vue inspect --rules -- 所有规则
vue inspect --rule media --查看某一项规则
vue inspect --plugins --查看所有插件
vue inspect --plugin xxx --查看某一个插件

8.针对图片，音频等资源，通过v-bind动态绑定其资源地址，是无法被解析正确格式，默认解析格式为html而非mp3
需要先引用，才可以再绑定，
例如 音频的src

template
<audio loop controls>
  <source :src="videoSource1" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

js
...
data(){
  return {
    videoSource1: require('../media/audio/main-rain.mp3')
  }
}
...

9.IE10 dataset获取不到数据
通过event.target可以获取到事件对象元素

获取事件对象元素
但是无法获取event.target.dataset.eleindex，因为event.target.dataset是undefined
只能通过event.target.getAttribute("data-eleindex")来获取

10.IE报错 CRIPT5022: SecurityError sockjs.js
进入 /node_modules/sockjs-client/dist/sockjs.js，对没有用到sockjs但是又调用了sockjs进行注释

try {
    // self.xhr.send(payload); // 注释掉
} catch (e) {
    self.emit('finish', 0, '');
    self._cleanup(false);
}