精华内容
下载资源
问答
  • Vue 生产环境部署

    千次阅读 2017-07-19 18:11:06
    Vue2.0 生产环境部署 简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下;~!...

    Vue2.0 生产环境部署

    简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下;~


    一、如何打包,部署到生产环境(线上)

    npm run build

    1. dist 文件结构(编译后,生成在vue目录下)

    • static (存放css/js/image)
    • index.html (编译后页面)

    2. 部署生产环境(以Thinkphp为例)

    (1) 建立子项目,创建控制器建立index方法;实例化模板;将编译后index.html存放在对应的视图下;
    
    (2) 修改vue配置文件(dist下status文件,默认存放在项目的根目录;若无须改变请忽略此步骤!)  
    

    (index.html 文件目录)

    (config文件static存在路径修改,配置文件路径:config\index.js)
     

    二、不加载组件(非根目录)

    原因:路由path错误 
    (路由配置图)

    三、刷新页面(刷新路由)出现404

    1. 为什么

    vue路由设置 HTML5 History 模式,直接访问/刷新url会被http server直接解析到该文件路径(被相应的框架接管),但vue的路由是虚拟的(只是告知编译后index.html文件追寻到相应的路径),并不能直接找到这个file,所以会404

    2. 怎么做(针对nignx;具体参考:HTML5 History 模式

    location / {
      root (index.html存在目录路径,比如:/admin/tpl/index/)
      try_files $uri $uri/ /index.html;
    }
    
    单配置此步骤,任意不存在页面(404)都会跳转到上述指定路径;详细解决办法请看下文;

    四、任意不存在页面(404)都跳转到指定路径(针对解决404页面后)

    这里写图片描述
    个人解决方法:制作404页面的组件;在routes.js配置,配置增加路由

    { path: '*', component: defaults }

    作者:不动峰
    出处:http://www.jianshu.com/users/c0abc9c5f51e/latest_articles
    博客园:http://www.cnblogs.com/mylly/
    备注:现承接企业大型网站与接口开发,有意向的朋友请联系(QQ:857280707)
    版权所有,欢迎保留原文链接进行转载:)

    展开全文
  • 前端vue环境部署pdf文档
  • vue+flask生产环境部署

    千次阅读 2020-10-27 19:47:20
    目录 1、整体架构 2、前端部署 3、flask部署 4、注意事项 1、整体架构 ...前后端分离架构,部署在同一台物理服务器上,使用前端路由,前后端通过json数据通信,前端通过axios访问后端api...flask生产环境部署需要uwsg

    目录

    1、整体架构

    2、前端部署

    3、flask部署

    4、注意事项


    1、整体架构

    前后端分离架构,部署在同一台物理服务器上,使用前端路由,前后端通过json数据通信,前端通过axios访问后端api,需要解决跨域访问问题。

    2、前端部署

    我使用的是@vue/cli 4.x,直接npm run build后,将dist文件夹中的内容放在nginx服务器的html文件夹中,配置nginx服务器404页面指向前端主页index.html。

    3、flask部署

    flask生产环境部署需要uwsgi程序,pip install uwsgi可安装此程序。配置好uwsgi.ini文件,使用ini文件启动uwsgi。

    首先解决跨域问题,将前端访问后端的api都加上/api前缀,在nginx中配置rewrite规则,将/api及之前的部分整体替换成要访问的ip和端口地址。

    然后配置nginx服务器第二个端口(假设前端文件占用的是第一个端口),即上述/api改写后指向的端口,将此端口指向uwsgi代理的地址,即完成配置。

    4、注意事项

    注意vue.config.js中的devserver设置不会在生产环境中生效

    展开全文
  • 下面小编就为大家带来一篇基于Vue生产环境部署详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue生产环境部署

    2019-08-24 10:05:16
    生产环境部署开启生产环境模式不使用构建工具使用构建工具模板预编译提取组件的 CSS跟踪运行时错误 以下大多数内容在你使用 Vue CLI 时都是默认开启的。该章节仅跟你自定义的构建设置有关。 开启生产环境模式   ...

    以下大多数内容在你使用 Vue CLI 时都是默认开启的。该章节仅跟你自定义的构建设置有关。

    开启生产环境模式

      开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。

    不使用构建工具

      如果用 Vue 完整独立版本,即直接用 <script> 元素引入 Vue 而不提前进行构建,请记得在生产环境下使用压缩后的版本 (vue.min.js)。两种版本都可以在安装指导中找到。

    使用构建工具

      当使用 webpack 或 Browserify 类似的构建工具时,Vue 源码会根据 process.env.NODE_ENV 决定是否启用生产环境模式,默认情况为开发环境模式。在 webpack 与 Browserify 中都有方法来覆盖此变量,以启用 Vue 的生产环境模式,同时在构建过程中警告语句也会被压缩工具去除。所有这些在 vue-cli 模板中都预先配置好了,但了解一下怎样配置会更好。

    webpack
    在 webpack 4+ 中,你可以使用 mode 选项:

    module.exports = {
      mode: 'production'
    }
    

    但是在 webpack 3 及其更低版本中,你需要使用 DefinePlugin

    var webpack = require('webpack')
    
    module.exports = {
      // ...
      plugins: [
        // ...
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production')
        })
      ]
    }
    

    Browserify

    • 在运行打包命令时将 NODE_ENV 设置为 "production"。这等于告诉 vueify 避免引入热重载和开发相关的代码。
    • 对打包后的文件进行一次全局的 envify 转换。这使得压缩工具能清除掉 Vue 源码中所有用环境变量条件包裹起来的警告语句。

    例如:

    NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

    • 或者在 Gulp 中使用 envify:
    // 使用 envify 的自定义模块来定制环境变量
    var envify = require('envify/custom')
    
    browserify(browserifyOptions)
      .transform(vueify)
      .transform(
        // 必填项,以处理 node_modules 里的文件
        { global: true },
        envify({ NODE_ENV: 'production' })
      )
    

    或者配合 Grunt 和 grunt-browserify 使用 envify:

    // 使用 envify 自定义模块指定环境变量
    var envify = require('envify/custom')
    
    browserify: {
      dist: {
        options: {
            // 该函数用来调整 grunt-browserify 的默认指令
            configure: b => b
            .transform('vueify')
            .transform(
                // 用来处理 `node_modules` 文件
              { global: true },
              envify({ NODE_ENV: 'production' })
            )
            .bundle()
        }
      }
    }
    

    Rollup
    使用 rollup-plugin-replace:

    const replace = require('rollup-plugin-replace')
    rollup({
      // ...
      plugins: [
        replace({
          'process.env.NODE_ENV': JSON.stringify( 'production' )
        })
      ]
    }).then(...)
    

    模板预编译

      当使用 DOM 内模板或 JavaScript 内的字符串模板时,模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了,但对性能敏感的应用还是最好避免这种用法。

      预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好,所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。

      如果你使用 webpack,并且喜欢分离 JavaScript 和模板文件,你可以使用 vue-template-loader,它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。

    提取组件的 CSS

      当使用单文件组件时,组件内的 CSS 会以 <style> 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销,如果你使用服务端渲染,这会导致一段“无样式内容闪烁 (fouc)”。将所有组件的 CSS 提取到同一个文件可以避免这个问题,也会让 CSS 更好地进行压缩和缓存。

    跟踪运行时错误

      如果在组件渲染时出现运行错误,错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。

    展开全文
  • Vue.js 生产环境部署

    2018-11-23 12:43:08
    生产环境部署 开启生产环境模式 开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产...

    生产环境部署

    开启生产环境模式

    开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。

    不使用构建工具

    如果用 Vue 完整独立版本,即直接用 <script> 元素引入 Vue 而不提前进行构建,请记得在生产环境下使用压缩后的版本 (vue.min.js)。两种版本都可以在安装指导中找到。

    使用构建工具

    当使用 webpack 或 Browserify 类似的构建工具时,Vue 源码会根据 process.env.NODE_ENV 决定是否启用生产环境模式,默认情况为开发环境模式。在 webpack 与 Browserify 中都有方法来覆盖此变量,以启用 Vue 的生产环境模式,同时在构建过程中警告语句也会被压缩工具去除。这些所有 vue-cli 模板中都预先配置好了,但了解一下怎样配置会更好。

    webpack

    在 webpack 4+ 中,你可以使用 mode 选项:

    module.exports = {
      mode: 'production'
    }
    

    但是在 webpack 3 及其更低版本中,你需要使用 DefinePlugin

    var webpack = require('webpack')
    
    module.exports = {
      // ...
      plugins: [
        // ...
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production')
        })
      ]
    }
    

    Browserify

    • 在运行打包命令时将 NODE_ENV 设置为 "production"。这等于告诉 vueify 避免引入热重载和开发相关的代码。
    • 对打包后的文件进行一次全局的 envify 转换。这使得压缩工具能清除掉 Vue 源码中所有用环境变量条件包裹起来的警告语句。例如:
    NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
    
    • 或者在 Gulp 中使用 envify

      // 使用 envify 的自定义模块来定制环境变量
      var envify = require('envify/custom')
      
      browserify(browserifyOptions)
        .transform(vueify)
        .transform(
          // 必填项,以处理 node_modules 里的文件
          { global: true },
          envify({ NODE_ENV: 'production' })
        )
        .bundle()
      
    • 或者配合 Grunt 和 grunt-browserify 使用 envify

      // 使用 envify 自定义模块指定环境变量
      var envify = require('envify/custom')
      
      browserify: {
        dist: {
          options: {
              // 该函数用来调整 grunt-browserify 的默认指令
              configure: b => b
              .transform('vueify')
              .transform(
                  // 用来处理 `node_modules` 文件
                { global: true },
                envify({ NODE_ENV: 'production' })
              )
              .bundle()
          }
        }
      }
      

    Rollup

    使用 rollup-plugin-replace

    const replace = require('rollup-plugin-replace')
    rollup({
      // ...
      plugins: [
        replace({
          'process.env.NODE_ENV': JSON.stringify( 'production' )
        })
      ]
    }).then(...)
    

    模板预编译

    当使用 DOM 内模板或 JavaScript 内的字符串模板时,模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了,但对性能敏感的应用还是最好避免这种用法。

    预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好,所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。

    如果你使用 webpack,并且喜欢分离 JavaScript 和模板文件,你可以使用 vue-template-loader,它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。

    提取组件的 CSS

    当使用单文件组件时,组件内的 CSS 会以 <style> 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销,如果你使用服务端渲染,这会导致一段“无样式内容闪烁 (fouc)”。将所有组件的 CSS 提取到同一个文件可以避免这个问题,也会让 CSS 更好地进行压缩和缓存。

    查阅这个构建工具各自的文档来了解更多:

    跟踪运行时错误

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

    from: https://cn.vuejs.org/v2/guide/deployment.html

    展开全文
  • Cannot assign to read only property ‘exports’ of object '#...然鹅,近期开发的项目,有用到swiper,测试环境一切正常,生产环境部署时开始报错: 由于生产环境浏览器版本比较低,不兼容es6语法,直接使用插件...
  • 主要介绍了vue项目打包之开发环境和部署环境的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue项目dev环境部署

    千次阅读 2018-10-14 00:53:45
    Vue项目webpack打包部署到服务器 - 如何打包 基于Vue-Cli,通过npm run build来进行打包的操作 注意npm run build打包成dist文件需要注意,项目中的package.json文件里面的script脚本,npm run 分别对应scripts下面的...
  • 关于vue部署正式环境处理ip和端口号

    千次阅读 2019-10-31 11:10:24
    前因:在我们写vue的项目的时候会遇到一个就是本地开发和正式环境的ip和端口号不一致的问题,以及本地开发跨域问题? 解决方法: 1.我们处理本地开发 在index.html proxyTable: { '/api': { //替换代理地址...
  • 前端vue打包部署到服务器环境

    千次阅读 2020-07-27 13:32:33
    第四步:找到本地和服务上放dist包的位置后,就要准备进行部署了,在部署之前小伙伴一定要记得更改前端代码的域名和端口(这里的域名和端口指的是你部署到测试或者生产环境对应的域名和端口),确保更改正
  • 在本篇文章里小编给大家整理了关于springboot+vue部署按照及运行方法和实例内容,需要的朋友们学习参考下。
  • node环境部署vue项目

    2020-10-13 18:55:42
    node环境部署vue项目1、使用express模块2、手动创建入口文件app.js3、已经托管到dist文件夹下了,你需要将你打包的dist文件放入根目录4、跨域相关配置 本项目解决前后台分离,跨域问题 前提概要:之前是单独将vue打包...
  • vue项目打包部署生产环境

    千次阅读 2019-05-16 11:58:00
    vue项目打包部署生产环境 打包部署生产环境之前需要修改配置文件: 修改一:build > utils.js(修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 修改二:config > index.js(修改...
  • Linux的nginx环境vue 部署

    千次阅读 2017-08-15 15:03:26
    1.使用WebStrom编程好的vue 进入到Terminal运行npm run build   2.使用WinSCP进入到nginx 目录配置文件下面,找到nginx.conf文件:  1.使用WinSCP打开PUTTY命令行:输入: find / -name nginx  
  • 1、下载安装包,具体版本根据自己需要。 wget https://nodejs.org/download/release/v6.12.3/node-v6.12.3-linux-x64.tar.gz 2、解压到指定目录 tar -xzvf node-v6.12.3-linux-x64.tar.gz.2 -C ~/app 3、配置...
  • vue项目打包之开发环境和部署环境

    千次阅读 2020-04-22 20:59:05
    项目开发阶段和生产环境可能不一样 如前端在开发阶段,接口可能是自己使用 node.js 搭建的服务器,API 返回的也都是假数据,等后台接口开发好后,再切换成后台提供的接口,等测试没有问题,服务端上线后,又要改成...
  • 当我们前端要调用跨域接口时,我们需要用代理解决跨域问题,比如Vue的代理配置proxy,但是当Vue项目打包成静态文件时,他的代理也就失灵了,因为代理的前提是本地必须有service,本章讲一下生产环境Vue项目如何做...
  • vue cli4多环境部署

    2020-08-18 16:58:42
    1、在根目录创建配置.end.xxx文件 2、编写文件 3、在package.json配置文件(sever代表运行文件,build代表打包文件) 4、直接使用process.env.VUE_APP_URL调用接口url
  • 如果是Vue-cli2的可以看我的上一篇文章:Vue二级目录部署&多环境打包部署(一) 我们的域名一般都是www.xxx.com,可是我们想实现www.xxx.com/aaa 或者 www.xxx.com/bbb怎么办呢?这就是我们今天要说的内容,部署...
  • Vue基于DockerFile的环境部署教程

    千次阅读 2020-01-14 15:30:55
    第一步创建文件、映射文件夹 ...创建一个Dockerfile文件 ..../dixncloud-ui/html为将要复制到nginx访问页面(即vue打包之后的dist文件加下的文件) 第二步:编写docker-compose.yml context:当前...
  • 一:相关技术 1. jenkins maven role权限控制 linux服务器安装 ...2.jenkins 自动化部署 springboot dubbo 微服务 以及nginx前后端分离静态文件自动部署 参考博客:https://blog.csdn.net/ssyuja...
  • Linux 下搭建Vue开发环境以及发布部署Vue项目Linux下vue环境的搭建nodejs安装cnpm安装vue-cli的安装新建一个Vue项目Vue打包部署到Linux安装nginxVue项目打包修改Nginx配置文件删除ProxyTable的配置重启nginx服务启动...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,268
精华内容 9,707
关键字:

vue部署需要什么环境

vue 订阅