vue-cli构建项目常见问题记录

一、 There are multiple modules with names that only differ in casing.

这个情况是如果多出引用的组件 有一个地方的引用地址的大小写肯定是写错了 检查一下

二、vue渲染iconfont

vue渲染iconfont的时候，用unicode。

四、预览打包后的文件

vue-cli打包build出来的dist文件夹，如果直接用本地文件的形式打开，是没有效果的。可以使用本地服务器，最简单的一种就是基于node.js的http-server，使用起来也非常的简单，首先使用npm install http-server -g来全局安装，安装完成之后，在项目文件夹下执行http-server就可以了，在浏览器中打开127.0.0.1:8080（这个是默认的端口号，也可以在命令行-p +端口号 来配置修改。）
如果你的index.html不是在项目的根目录下面，就用127.0.0.1:8080/path/to/index.html这样的方式来访问。

五、打包后字体和图片显示不出来

vue-cli打包出来的项目，可能会出现图片显示不出来，字体无法显示的问题，这个是因为打包之后的资源路径发生了改变。也有可能是图片路径是js动态引入的，需要再url外面套上一层require（'url/path/name’）

六、组件的懒加载-懒加载参考文档

let compo1 = ()=>import './component'

七、webpack-bundle-analyzer

安装webpack-bundle-analyzer，可以可视化分析打包后的js文件大小。vue-cli的话直接build之后会自动在浏览器打开。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins：[
   new BundleAnalyzerPlugin()
]

如果是在vue-cli项目里面，直接在config.js里面修改bundleAnalyzerReport: true

八、传递参数

vue-router的params相当于post传参，不带名字，只有值，要用name来跳转才有效果。query相当于get传参，表现为id=1，这样的形式。

九、简化组件引入的相对路径

如果是多页面结构的话，components的引用往往前面要加很多个点，写起来比较麻烦。在配置webpack的resolve的时候，可以用alias属性，将绝对路径转化成相对路径。

resolve:{
...
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
}

十、vue-router 动态设置页面标题

把页面信息添加到meta里面，添加上meta之后，还要用beforeEach函数来判断一下，并不是直接添加就ok克噢。

...
{path:'/issue',component:issue,children:[
        {path:'',component:commonIssue,meta:{title:'常见问题',index:1}},
        {path:'/issues/:id',component:issueDetail,name:'idetails',meta:{title:'常见问题',index:2}}
    ]},
...

router.beforeEach((to, from, next) => {//beforeEach是router的钩子函数，在进入路由前执行
  if (to.meta.title) {//判断是否有标题
    document.title = to.meta.title;
  }
  next()//执行进入路由，如果不写就不会进入目标页
})

十一、生产环境和开发环境分别配置网络请求 处理跨域

因为是前后端分离的项目，开发的时候需要跨域，发布到线上服务器之后不需要，所以需要根据环境来配置是否使用webpack 代理来处理跨域问题。
根据环境，给请求加一个统一的前缀api

// request.js
if(process.env.NODE_ENV=='development'){
      _url = '/api/' + opts.url;
    }else{
      _url = '/' + opts.url;
    }

在config/index.js里面，配置跨域代理

dev: {
    env: require('./dev.env'),
    port: 8099,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api/':{
            target:'https://wx.cccc.com/',   // 这里是线上服务器的域名
            changeOrigin: true,
            pathRewrite:{
                '^/api':''
            }
        }
    },
    cssSourceMap: false
  }

通过插件DefinePlugin可以输出一些变量，在js文件中获取。

new webpack.DefinePlugin({
      'process.env': config.dev.env
    })

报错Property or method "toJSON" is not defined on the instance

• 子组件下面的子组件，在生命周期函数mounted里面输出this会报一个奇怪的错误。
  

其他：

• vue在传props类型为数字的时候，如果不加冒号，会被认为是字符串，前面加上冒号，表示js表达式，就会传过去的是数字了。