VueJs2.0 专题
您的位置:JS框架 > VueJs2.0专题 > Vue.js 2.0 生产环境部署
Vue.js 2.0 生产环境部署
作者:--    发布时间:2019-11-20

删除警告

为了减少文件大小,vue 精简独立版本已经删除了所有警告,但是当你使用 webpack 或 browserify 等工具时,你需要一些额外的配置实现这点。

webpack

使用 webpack 的 defineplugin 来指定生产环境,以便在压缩时可以让 uglifyjs 自动删除代码块内的警告语句。例如配置:

var webpack = require('webpack')
module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.defineplugin({
      'process.env': {
        node_env: '"production"'
      }
    }),
    new webpack.optimize.uglifyjsplugin({
      compress: {
        warnings: false
      }
    })
  ]
}

browserify

  • 运行打包命令,设置 node_env 为 "production"。等于告诉 vueify 避免引入热重载和开发相关代码。
  • 使用一个全局 envify 转换你的 bundle 文件。这可以精简掉包含在 vue 源码中所有环境变量条件相关代码块内的警告语句。例如:
    node_env=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
  • 使用 vueify 中包含的 extract-css 插件,提取样式到单独的css文件。
    node_env=production browserify -g envify -p [ vueify/plugins/extract-css -o build.css ] -e main.js | uglifyjs -c -m > build.js

跟踪运行时错误

如果在组件渲染时出现运行错误,错误将会被传递至全局 vue.config.errorhandler 配置函数(如果已设置)。利用这个钩子函数和错误跟踪服务(如 sentry,它为 vue 提供官方集成),可能是个不错的主意。

提取 css

使用单文件组件时,<style> 标签在开发运行过程中会被动态实时注入。在生产环境中,你可能需要从所有组件中提取样式到单独的 css 文件中。有关如何实现的详细信息,请查阅 vue-loader 和  vueify 相应文档。

vue-cli 已经配置好了官方的 webpack 模板。

网站声明:
本站部分内容来自网络,如您发现本站内容
侵害到您的利益,请联系本站管理员处理。
联系站长
373515719@qq.com
关于本站:
编程参考手册