精华内容
下载资源
问答
  • vue部署需要什么环境
    2022-02-21 15:07:04

    一、环境

    Linux ecs-kc1-large-2-linux-20210411200540 4.15.0-70-generic #79-Ubuntu SMP Tue Nov 12 10:36:10 UTC 2019 aarch64 aarch64 aarch64 GNU/Linux

    二、参考

    配置node、npm、vue/cli过程参考:
    Linux环境搭建vue开发环境
    Linux 下搭建Vue开发环境

    三、问题

    1、问题1

    问题描述:运行npm run serve时报错,如下。

    error:0308010C:digital envelope routines::unsupported

    出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响.

    在node.js V17以前一些可以正常运行的的应用程序,但是在 V17 版本可能会抛出以下异常:

    opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
    library: ‘digital envelope routines’,
    reason: ‘unsupported’,
    code: ‘ERR_OSSL_EVP_UNSUPPORTED’

    目前可以通过运行以下命令行临时解决这个问题:

    set NODE_OPTIONS=--openssl-legacy-provider

    参考:error:0308010C:digital envelope routines::unsupported

    2、问题2

    问题描述:运行npm run serve报以下错误

    Error from chokidar (/root/vue/work/IOT2/iot/src/store): Error: ENOSPC: Syst

    只需要在终端执行以下命令即可

    echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

    参考及原因见:Vue-cli:运行npm run serve 报Error from chokidar

    3、问题3

    问题描述:axios的get请求失效, 请求地址时提示:

    net::ERR_CONNECTION_REFUSED

    原因:axios的请求地址还是请求了localhost,将URL改为后端地址即可。

    不过这里很奇怪,我前后端放的是同一台服务器,按理说localhost是没问题的。可是就是不行,后来改成了其他IP地址就可以了。

    参考:Vue项目放到线上服务器,axios请求地址提示net::ERR_CONNECTION_REFUSED

    更多相关内容
  • 本文将详细介绍Vue生产环境部署 生产环境 如果用 Vue 完整独立版本 (直接用 [removed] 元素引入 Vue),生产时应该用精简版本 (vue.min.js) 如果用 Webpack 或 Browserify 类似的打包工具时,生产状态会在 Vue 源码中...
  • env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 .env.test 测试环境下的配置文件 2.env书写要求 属性名以VUE_APP_开头 ...

    1.认识env文件

    (1).env 文件主要的作用是存储环境变量。

    (2).关于env文件的命名规范:必须以“.env”文件名开头

    env 全局默认配置文件,不论什么环境都会加载合并

    .env.development 开发环境下的配置文件

    .env.production 生产环境下的配置文件

    .env.test 测试环境下的配置文件

    2.env书写要求

    属性名以VUE_APP_开头

    3.文件的加载

    根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以说不要乱起名,也无需专门控制加载哪个文件

    4.配置当前环境

    根目录下新建一个 webpack.config.js 的配置文件

    module.exports = {
      mode: 'development'   // mode是你当前的环境
    }

    5.启动项目

    在根目录打开cmd ,输入 $npm run serve 启动项目

    6.使用.env文件的变量

    import Vue from 'vue'
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
    // 将从 .env 文件中获取的变量 放在 Vue 原型上
    // 因为在 webpack.config.js 中配置的是 development ,所以自动读取 .env.development 文件中的变量
    // .env 文件中的变量在 process.env中
    Vue.prototype.API_BASE_URL = process.env.VUE_APP_API_BASE_URL
    
    console.log(Vue.prototype)
    
    console.log(process.env)
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')
    

    展开全文
  • 主要介绍了vue项目打包之开发环境和部署环境的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue官方说可以不通过ngin来部署,但是如果上生产环境,建议还是要走nginx 安装nginx 这里安装过程不再赘述,如果不清楚可以参考下面这篇文章 https://blog.csdn.net/qq_42815754/article/details/82980326 配置...
  • Spring Boot打打包包部部署署和和环环境境配配置置详详解解 这篇文章主要介绍了Spring Boot打包部署环境配置详解文中通过示例代码介绍的非常详细对大家的学习或 者工 具有一定的参考学习价值需要的朋友们下面随着...
  • 主要介绍了详解用Docker搭建Laravel和Vue项目的开发环境,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了SpringBoot + Vue 项目部署上线到Linux 服务器,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...
  • 目录一、方式一:通过 process.env.NODE_ENV 环境变量进行设置1....Vue 项目在不同阶段需要部署到不同的环境,比如开发环境(dev)、测试环境(test)、UAT 环境(uat)、生产环境(prod)等,那么如何通过自


    Vue 项目在不同阶段需要部署到不同的环境,比如开发环境(dev)、测试环境(test)、UAT 环境(uat)、生产环境(prod)等,那么如何通过自动化构建工具实现在多环境下自动部署呢?以下列出两种实现方式。

    一、方式一:通过 process.env.NODE_ENV 环境变量进行设置

    1.定义环境参数

    var BASE = {
      /**
       * @description api请求基础路径
       */
      API_DEV: {
        common: "http://192.xx.xx.xx:8890",
        buyer: "http://192.xx.xx.xx:8888",
        manager: "http://192.xx.xx.xx:8887"
      },
      API_UAT: {
        common: "http://124.xx.xx.xx:8890",
        buyer: "http://124.xx.xx.xx:8888",
        manager: "http://124.xx.xx.xx:8887"
      },
      API_PROD: {
        common: "http://129.xx.xx.xx:8890",
        buyer: "http://129.xx.xx.xx:8888",
        manager: "http://129.xx.xx.xx:8887"
      },
    };
    

    2.编写 js 文件,对环境进行判断

    // api地址
    export const buyerUrl =
      process.env.NODE_ENV === 'development'
        ? BASE.API_DEV.buyer
        : ( process.env.NODE_ENV === 'uat' ? BASE.API_UAT.buyer : BASE.API_PROD.buyer );
    export const commonUrl =
      process.env.NODE_ENV === 'development'
        ? BASE.API_DEV.common
        : ( process.env.NODE_ENV === 'uat' ? BASE.API_UAT.common : BASE.API_PROD.common );
    export const managerUrl =
      process.env.NODE_ENV === 'development'
        ? BASE.API_DEV.manager
        : ( process.env.NODE_ENV === 'uat' ? BASE.API_UAT.manager : BASE.API_PROD.manager );
    

    3.部署服务器上设置环境变量

    export NODE_ENV=development #开发环境
    export NODE_ENV=uat #UAT环境
    export NODE_ENV=production #生产环境
    

    二、方式二:通过指定编译参数进行设置

    1.配置 .env 文件

    分别创建 .env.development、.env.uat、.env.prod 三个配置文件,与 package.json 同级:
    在这里插入图片描述

    (1).env.development

    NODE_ENV=development
    VUE_APP_API_BASE_URL=http://192.xx.xx.xx:8088
    

    (2).env.uat

    NODE_ENV=uat
    VUE_APP_API_BASE_URL=http://124.xx.xx.xx:8088
    

    (3).env.prod

    NODE_ENV=prod
    VUE_APP_API_BASE_URL=http://129.xx.xx.xx:8088
    

    2.修改 package.json 文件

      "scripts": {
        "dev": "vue-cli-service serve",
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "build:dev": "vue-cli-service build --mode development",
        "build:uat": "vue-cli-service build --mode uat",
        "build:prod": "vue-cli-service build --mode prod",
        "lint": "vue-cli-service lint"
      },
    

    3.编译打包

    npm install cross-env -g && npm install && npm run build:uat
    
    展开全文
  • 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 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。

    展开全文
  • linux开发环境部署vue

    2022-01-10 15:52:14
    1、部署nodejs ...下载10.0 以上版本 1、下载安装包,解压到/usr/local/ 下 2、配置全局命令 ln -s /usr/local/node-v12.13.0-linux-x64/bin/npm /usr/bin/ ln -s /usr/local/node-v12.13.0-linux-x64...1、部署vue环境 1
  • vue项目分环境部署

    2022-08-23 16:48:16
    vue部署 1、相关配置 staging可以认为是测试环境,production可以认为是正式环境 vue.config.js需要进行配置,多环境的时候,这里主要看具体的情况,根据具体情况去设计,我这里是有两个环境需要部署在同个服务器...
  • changeOrigin: true, // 如果接口跨域,需要进行这个参数配置,为true的话,请求的header将会设置为匹配目标服务器的规则(Access-Control-Allow-Origin) pathRewrite: { '^/api': '' //本身的接口地址没有 '/
  • Vue项目开发需要准备和配置些什么环境? 一、首先需要安装node.js 下载:安装node.js链接 安装在D盘 window+R,输入cmd,打开命令提示符窗口,输入: npm -v 检测是否安装成功,如果输出版本号,则表示安装成功,如...
  • 部署vue3开发环境

    2022-04-14 15:38:02
    1. 安装nodeJS 去官网下载安装,建议安装最新版 2. 安装配置npm 其实安装完成nodeJS之后,会自动给你安装好npm,因为npm下载资源包是外网,我们使用cnpm淘宝网 ...sudo npm install -g npm ...3. 安装vue-cli脚手架
  • vue项目打包部署生产环境

    千次阅读 2020-10-09 16:24:07
    当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中。我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上。 build > utils.js (修改publicPath:...
  • vue+flask生产环境部署

    千次阅读 2020-10-27 19:47:20
    目录 1、整体架构 2、前端部署 3、flask部署 4、注意事项 1、整体架构 ...前后端分离架构,部署在同一台物理服务器上,使用前端路由,前后端通过json数据通信,前端通过axios访问后端api...flask生产环境部署需要uwsg
  • 相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环境,编译打包后,放入服务器,项目就不正常了,会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张,...
  • Vue本地开发环境配置及上线部署
  • 首先介绍一下本项目的背景,是基于 vue-cli3.1.1 的单页应用,目前测试环境和生产环境都在线上,并且都在同一个域名下,其中生产环境部署在根目录下,测试环境部署在名为 test 的子目录下,根据生产环境和测试环境的...
  • node环境部署vue项目

    千次阅读 2020-10-13 18:55:42
    node环境部署vue项目1、使用express模块2、手动创建入口文件app.js3、已经托管到dist文件夹下了,你需要将你打包的dist文件放入根目录4、跨域相关配置 本项目解决前后台分离,跨域问题 前提概要:之前是单独将vue打包...
  • 什么要配置不同的接口地址 在开发过程中,前端请求访问的是自己本机启动的后台服务,此时涉及到跨域(因为端口不一样),所以在config/index.js文件中配置了代理 //检查某个文件是否存在 try { fs.statSync...
  • vue项目打包之开发环境和部署环境

    千次阅读 2020-04-22 20:59:05
    项目开发阶段和生产环境可能不一样 如前端在开发阶段,接口可能是自己使用 node.js 搭建的服务器,API 返回的也都是假数据,等后台接口开发好后,再切换成后台提供的接口,等测试没有问题,服务端上线后,又要改成...
  • 很多时候 npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件。 vue-cli@3 ...这里需要注意的是 dev 环境下不需
  • 注:由于 SSO 登录后,相关 Cookie 被加在四级域名上,因而需要做到本地测试域名和线上接口域名相同。 2. 方案 配置 Host 文件使线上域名指向 Localhost: 127.0.0.1 product.xxx.xxx.com 配置 Nginx 进行对应转发...
  • 众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题。 什么是跨域?实现跨域的多种方式? ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,421
精华内容 14,968
热门标签
关键字:

vue部署需要什么环境