一个基于Vue的门户网站(经验踩坑)

在做项目中请必须熟知项目背景，项目需求，再去做技术选型！

使用框架时必须熟知框架指令特性！很重要；

兼容IE9以下低版本请不要使用Vue

Bootstrap+jQuery是很好的选择！

VUE进行开发实现双语言切换

库：          1.i18n(双语言切换)；

                  2.vue-router(路由）；

                  3.vuex(状态管理，需要进行双语言切换监听变化)；

                  4.ElementUI(饿了么以电脑端为主得UI框架)；

                  5.sass(css预处理)；

                  6.echarts(需要K线图，个人推荐不要用echarts,太大)；

                  7.axios(相对于fetch兼容性好，请求数据)

IE的坑：1.走马灯之前用的是swiper的，结果兼容性不好，4.0+兼容不好，3.0主要以移动端为主，

                之后换成了ElementUI的走马灯又引导出无法覆盖ElementUI的样式，因为VUE是默认全局覆盖局部，再加一个style，不要加scoped,ElementUI是全局引入！  解决问题。

                2.经验不足，IE9不支持flex,坑、坑、坑移动端写习惯了！

                3.多行文本省略只支持webkit内核浏览器，又是坑，用js控制长度搞定！

                4.低版本兼容引入babel-polyfill，将build webpack.base.conf.js里entry修改为entry: {'babel-polyfill': 'babel-polyfill',app: './src/main.js'},

            5.使用axios低版本兼容 es6-promise包，在main.js里引用

                import promise from 'es6-promise'

                promise.polyfill()

打包：1.history模式：需要服务器端配置请看官网https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations；不需要改任何东西，路由里加mode:history即可

           2.hash模式：将config里index.js里的 assetsPublicPath: '/'   改为assetsPublicPath: './',即可访问静态资源；

           3.打包体积：将config里index.js里的productionSourceMap: true, 改为 productionSourceMap: false，或者待打包完之后手动删除Map文件；

            4.路由懒加载（具体看官网很简单）；

            5.第三方包分离将build webpack.base.conf.js里添加

                    externals:{；

                        'echarts':"echarts"

                      },

            6.打包后css背景图无法访问，将build   utils.js里添加  publicPath: '../../',

        7.sass配置（webpack.base.conf.js）

    { test: /\.scss$/, loaders: ["style", "css", "sass"]},

如有写错的地方欢迎大家评论