ins-vuevue

Vue前端路线执行与落地--新项目实施与落地篇

2018-08-02  本文已影响0人  youins

新项目基于vue技术路线的开发

运用到的工具、框架或库

开发流程

注意事项

新项目基于vue技术路线的实施

多环境打包部署配置-测试环境

一般使用vue-cli脚手架创建的vue工程中都会有一个打包的配置目录build，其中对开发环境编译运行和生产环境打包做了相关配置，如果需要自定义测试环境的打包，我们把build.js复制一份，改名为bulid.test.js作为测试环境打包的总入口，同时复制一份webpack.prod.conf.js---->webpack.test.conf.js，修改成测试环境的相应配置即可。最后在config/index.js中增加如下配置:

 buildtest: {

    index:path.resolve(__dirname, '../dist/index.html'),

    assetsRoot:path.resolve(__dirname, '../dist'),

    assetsSubDirectory:'static',

    assetsPublicPath:'./',

    productionSourceMap:true,

    devtool:'#source-map',

    productionGzip:false,

    productionGzipExtensions: ['js', 'css'],

    bundleAnalyzerReport:process.env.npm_config_report

  },

这里对几个比较重要的配置做下说明：

测试环境配置完成以后，在package.json的scripts对象中增加

"buildtest": "nodebuild/build.test.js"

然后就可以使用npmrun buildtest命令来进行测试环境的打包了。

打包静态资源问题

如果在打包的过程中想压缩资源文件,可以开启gzip压缩功能(config/index.js文件)

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css', 'jpg', 'png'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

productionGzip：true|false，是否开始压缩功能，开启压缩功能之后, 打包出来的成果物要小很多.

IE兼容性问题

Vue官方文档有对IE兼容性的说明，因为 Vue 使用了IE8 无法模拟的 ECMAScript 5 特性。所以Vue不支持 IE8 及以下版本，它支持所有兼容ECMAScript 5 的浏览器。

在项目开发完成后，却出现了IE11无法访问的情况，具体报错信息：

SCRIPT5022: [vuex] vuex requires a Promisepolyfill inthis browser.

造成这种现象的原因归根究底就是浏览器对ES6中的promise无法支持，因此需要通过引入babel-polyfill来使我们的浏览器正常使用es6的功能，解决方案：

npm install babel-polyfill --save-dev

  entry: {

    app: ['babel-polyfill','./src/main.js']

  },

登录状态路由拦截

一般系统都会有对所有需要权限控制的路由进行拦截，确保登录状态下才能访问某些路由这类需求。利用vue-router提供的钩子函数beforeEach()可以很简单的实现。

首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。

{
    path:'/xxx,
    meta: {
      requireAuth:true, // 添加该字段，表示进入这个路由是需要登录的
    },
    component:xxx,
    redirect:'/xxx/xxx,
    children: [{
      meta: {
        requireAuth:true,

      },
      path:xxx/',
      component:xxx
    }
  }

// 全局导航钩子

router.beforeEach((to, from, next) => {

  if (to.meta.requireAuth) {
    getCurrentUser().then((curUser)=>{//getCurrentUser是封装的调用后台http接口的promise接口
      if (curUser) {
        next();
      } else {
        next({
          path:'/login',
          query: {
            redirect:to.fullPath //登录页面获取该参数，在重新登录后重定向到该路由
          }
        })
      }
    }).catch((err)=>{
      next({
        path:'/login',
        query: {
          redirect:to.fullPath
        }
      })
    }); 
  } else {
    next();
  }
  
})

每个钩子方法接收三个参数：

上一篇 下一篇

猜你喜欢

热点阅读