精华内容
下载资源
问答
  • 针对前后端完全分离项目,为不同环境配置不同的打包指令是非常必要的。vue-cli2 和 vue-cli3 的配置有所不同,下面分别介绍一下。 一、vue-cli2 详细步骤: 1、安装 cross-env,它可以处理 windows 和其他 Unix 系统...

    针对前后端完全分离项目,为不同环境配置不同的打包指令是非常必要的。vue-cli2 和 vue-cli3 的配置有所不同,下面分别介绍一下。

    一、vue-cli2

    详细步骤:
    1、安装 cross-env,它可以处理 windows 和其他 Unix 系统在设置环境变量的写法上不一致的问题。

    npm i --save-dev cross-env 
    

    2、配置不同环境下的文件和参数,在 config 目录下创建test.env.js、prod.env.js、dev.env.js 文件(如果已经有了就直接下面操作),修改文件内容:

    test.env.js:测试环境

    'use strict'
    module.exports ={
      NODE_ENV: '"testing"',
      EVN_CONFIG:'"test"',
      API_ROOT: '"xxx"'
    }
    

    prod.env.js:生产环境

    'use strict'
    module.exports = {
     NODE_ENV: '"production"',
     EVN_CONFIG:'"prod"',
     API_ROOT:'"xxx"'
    }
    

    dev.env.js :本地

    'use strict'
    const merge = require('webpack-merge');
    const prodEnv = require('./prod.env');
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      EVN_CONFIG:'"dev"',
      API_ROOT: ' "http://localhost:1234/api/" '
    })
    

    API_ROOT 是后端接口服务IP或者域名。

    3、打开 package.json 文件,在 scripts 里面配置指令名称

    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js",
        "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
        "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
      }
    

    4、打开 config / index.js 文件,在 build 最上面添加 prodEnv、testEnv,这里的参数会在build/webpackage.prod.conf.js中使用到

     build: {
        prodEnv: require('./prod.env'),
        testEnv: require('./test.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
     }
     //下面内容不需要修改
    

    5、打开 build/webpackage.prod.js 文件,调整env常量的生成方式

    //仅修改 env 
    const env = config.build[process.env.env_config+'Env'];
    //process.env.env_config+'Env' ==> prodEnv、testEnv
    

    6、打开 build / build.js 文件,修改 spinner 的定义

    'use strict'
    require('./check-versions')()
    //process.env.NODE_ENV = 'production'
    const ora = require('ora')
    const rm = require('rimraf')
    const path = require('path')
    const chalk = require('chalk')
    const webpack = require('webpack')
    const config = require('../config')
    const webpackConfig = require('./webpack.prod.conf')
    //const spinner = ora('building for production...')
    var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
    spinner.start()
    //下面内容不需要修改
    

    7、打包

    //测试环境打包
    npm run build:test
    //生产环境打包
    npm run build:prod
    
    二、vue-cli3

    详细步骤:
    1、在 package.json 文件配置指令名称

    "scripts": {
        "dev": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "build:test": "vue-cli-service build --mode test",
        "build:prod": "vue-cli-service build --mode prod"
      }
    

    2、在 package.json 同级目录下创建 .env.test、.env.prod 文件,以及 config.js 文件,然后修改文件里的内容
    (.env.test 类型文件的创建可以参考文章 《如何创建 .env 文件?》
    .env.test:测试环境

    NODE_ENV = 'test'
    VUE_APP_TITLE = 'test'
    

    .env.prod :生产环境

    NODE_ENV = 'prod'
    VUE_APP_TITLE = 'prod'
    

    特别注意:
    NODE_ENV = ‘prod’ 和 VUE_APP_TITLE = 'prod’这个后面千万不要加 “ ; ” 如果加了你在获取 process.env.VUE_APP_TITLE的时候获取到的是 ’prod‘;,在环境判断的时候将会是很大的问题。

    config.js:配置不同环境下对应的接口域名

    let baseUrl = ''
    switch (process.env.VUE_APP_TITLE) {
        case 'test': //测试
    		baseUrl = "http://xxxx"
            break
        case 'prod': //生产
            baseUrl = "http://xxxx"
            break
        default://本地
            baseUrl = "http://xxxxt"
    }
    export default baseUrl;
    

    3、在配置 axios 时使用

    import baseUrl from '../../config.js';
    const service = axios.create({
      withCredentials: false,
      baseURL: config.baseUrl
    })
    

    4、打包

    //测试环境打包
    npm run build:test
    //生产环境打包
    npm run build:prod
    
    展开全文
  • 基于vuecli的根据不同的环境调用不同的接口,本地代理跨域,第三方资源分离打包
  • vue打包之后部署服务器访问服务器端接口4041.vue+axios本地开发环境请求线上服务器接口跨域没有问题开发环境跨域配置// vue.config.jsdevServer: {proxy: {[process.env.VUE_APP_BASE_API]: {target: '...

    vue打包之后部署服务器访问服务器端接口404

    1.vue+axios本地开发环境请求线上服务器接口跨域没有问题

    开发环境跨域配置

    // vue.config.js

    devServer: {

    proxy: {

    [process.env.VUE_APP_BASE_API]: {

    target: 'http:xx.xx.xx', //对应跨域的接口

    changeOrigin: true,

    ws: true,

    pathRewrite: {

    '/api': ''

    },

    secure:false,

    },

    },

    eggjs服务端跨域配置已开启跨域

    // config.default.js

    security: {

    csrf: {

    enable: false,

    ignoreJSON: true

    },

    domainWhiteList: ['*']

    },

    cors: {

    enable: true,

    origin: '*',

    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'

    },

    // plugin.js

    cors: {

    enable: true,

    package: 'egg-cors'

    },

    2.vue打包部署之后访问服务器接口404

    3.解决办法:配置nginx代理

    server

    {

    listen 5000;

    server_name eggjsdemo;

    index index.php index.html index.htm default.php default.htm default.html;

    root /www/h5/camp_entry/add;

    include enable-php-00.conf;

    location / {

    root /www/h5/camp_entry/add;

    try_files $uri $uri/ /index.html

    a#dd_header 'Access-Control-Allow-Origin' '*';

    index index.html index.htm;

    }

    location /guns/ {

    add_header 'Access-Control-Allow-Origin' '*';

    add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';

    add_header 'Access-Control-Allow-Headers' 'Authorization';

    proxy_pass http://xxx.xxx.xxx/; // 代理地址

    }

    }

    展开全文
  • 0 环境 服务器:阿里云 服务器操作系统:centos ssh :xshell 前端:nodejs+vue 1 导图 2 xhsell 安装和配置 xshell 安装包+配色方案下载 xshell 安装 使用遇到的问题 + 配色方案 3 前端项目配置 1 修改后端地址 ...

    0 环境

    • 服务器:阿里云
    • 服务器操作系统:centos
    • ssh :xshell
    • 前端:nodejs+vue

    1 导图

    环境基础+部署流程

    2 xhsell 安装和配置

    xshell 安装包+配色方案下载

    xshell 安装 使用遇到的问题 + 配色方案

    3 前端项目配置

    1 修改后端地址

    2 修改端口和前端不显示源码

    在项目根目录 新建vue.config.js文件

    module.exports = {
      devServer: {
        // 你定义的host
        host: xxxx,
        // 自定义端口
        port: 8080
      },
      // 隐藏源代码
      productionSourceMap: false
    }
    

    4 前端项目打包

    1 命令打包

    找到前端项目根目录 进入命令行 输入命令npm run build

    vscode下打包

    2 图形界面打包

    vue给我们提供了管理平台 拿win10来讲 进入dos命令行 输入vue ui 进入首页

    图形界面打包

    5 上传到服务器

    传输到服务器

    展开全文
  • Springboot项目与vue项目整合打包

    千次阅读 2019-05-09 11:01:14
    我的环境 * JDK 1.8 * maven 3.6.0 * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的...针对这种情况这里采用的在开发中做到前后端独立开发,打包时在后端springboot打包发...

    我的环境
    * JDK 1.8
    * maven 3.6.0
    * node环境

    1.为什么需要前后端项目开发时分离,部署时合并?

    在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定的环境也无法做到自动构建,容器化部署等。因此在这种情况下尽量减少部署时的服务软件需求,打出的包数量也尽量少。针对这种情况这里采用的在开发中做到前后端独立开发,打包时在后端springboot打包发布时将前端的构建输出一起打入,最后只需部署springboot的项目即可,无需再安装nginx服务器

    在这里我有两种方式,一种是简单的,一种是复杂的,下边先来看一个简单的例子:

    1)前端开发好后将build构建好的dist下的文件拷贝到springboot的resources的static下(boot项目默认没有static,需要自己新建)

    操作步骤:前端vue项目使用命令 npm run build 或者 cnpm run build 打包生成dist文件,在springboot项目中resources下建立static文件夹,将dist文件中的文件复制到static中,然后去application中跑起来boot项目,这样直接访问index.html就可以访问到页面(api接口请求地址自己根据情况打包时配置或者在生成的dist文件中config文件夹中的index.js中配置)

    项目结构如图:

    鼠标选中的这几个就是从dist文件中复制过来的前端的包,然后我们直接启动boot项目就可以通过index.html访问了(ps:上面这是最简单的合并方式,但是如果作为工程级的项目开发,并不推荐使用手工合并,也不推荐将前端代码构建后提交到springboot的resouce下,好的方式应该是保持前后端完全独立开发代码,项目代码互不影响,借助jenkins这样的构建工具在构建springboot时触发前端构建并编写自动化脚本将前端webpack构建好的资源拷贝到springboot下再进行jar的打包,最后就得到了一个完全包含前后端的springboot项目了。不过上述方法操作简单,便于使用,如果想一次性打包完成的话,就看第二种)

    2:第二种方法是在src/main下建立一个webapp文件夹,然后将前端项目的源文件复制到该文件夹下,具体结构如图:

    然后使用maven命令执行本地node打包命令,这样就可以 在执行mvn clean package命令时,利用maven插件执行cnpm run build命令(我是使用的淘宝的镜像cnpm,国外的npm命令会相对慢一些,大家根据自己的条件选择,具体命令请看项目中前端vue文件的README.md),一次性完成整个过程

    实现方法是这样的,我们要引入org.codehaus.mojo插件来进行maven调用node命令,pom.xml中为:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    <plugin>

                    <groupId>org.codehaus.mojo</groupId>

                    <artifactId>exec-maven-plugin</artifactId>

                    <executions>

     

                        <execution>

                            <id>exec-cnpm-install</id>

                            <phase>prepare-package</phase>

                            <goals>

                                <goal>exec</goal>

                            </goals>

                            <configuration>

                                <executable>${cnpm}</executable>

                                <arguments>

                                    <argument>install</argument>

                                </arguments>

                                <workingDirectory>${basedir}/src/main/webapp</workingDirectory>

                            </configuration>

                        </execution>

     

                        <execution>

                            <id>exec-cnpm-run-build</id>

                            <phase>prepare-package</phase>

                            <goals>

                                <goal>exec</goal>

                            </goals>

                            <configuration>

                                <executable>${cnpm}</executable>

                                <arguments>

                                    <argument>run</argument>

                                    <argument>build</argument>

                                </arguments>

                                <workingDirectory>${basedir}/src/main/webapp</workingDirectory>

                            </configuration>

                        </execution>

     

                    </executions>

                </plugin>

      

    然后maven-resources-plugin插件将项目的前端文件打包到boot项目的classes中,具体的请参考pom.xml中的,

     将webapp/dist文件夹中的文件复制到src/main/resources/static中,并打包到classes

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    <!--copy文件到指定目录下 -->

                <plugin>

                    <groupId>org.apache.maven.plugins</groupId>

                    <artifactId>maven-resources-plugin</artifactId>

                    <configuration>

                        <encoding>${project.build.sourceEncoding}</encoding>

                    </configuration>

                    <executions>

                        <execution>

                            <id>copy-spring-boot-webapp</id>

                            <!-- here the phase you need -->

                            <phase>validate</phase>

                            <goals>

                                <goal>copy-resources</goal>

                            </goals>

                            <configuration>

                                <encoding>utf-8</encoding>

                                <outputDirectory>${basedir}/src/main/resources/static</outputDirectory>

                                <resources>

                                    <resource>

                                        <directory>${basedir}/src/main/webapp/dist</directory>

                                    </resource>

                                </resources>

                            </configuration>

                        </execution>

                    </executions>

                </plugin>

    然后通过maven命令:

    1

    mvn clean package -P window 

    打包成功后我们的前端项目就整个的打包到了boot项目的jar包中,然后启动项目,访问index.html页面就看到了项目启动成功。

    打出来的jar包中如果static说明打包由于种种原因失败了,我就遇到过几次,这时候需要再来一次 mvn clean package -P window

    展开全文
  • vue打包之后部署服务器访问服务器端接口404 1.vue+axios本地开发环境请求线上服务器接口跨域没有问题 开发环境跨域配置 // vue.config.js devServer: { proxy: { [process.env.VUE_APP_BASE_API]: { target: ...
  • 最近公司把云平台产品用vue前后端分离的框架来写,前面大部分开发都比较顺利,后面打包部署出了bug 现在记录下自己遇到的哪些坑 1,我直接npm run build打包出来,打开dist目录下面的index.html空白页,页面上出现...
  • vue官方学习网站: https://cn.vuejs.org/ 1.文件中的css会打包成了js形式 如何优化 1.将css打包成一个单独的文件 (1)安装插件extract-text-webpack-plugin cnpm install --save extract-text-webpack-plugin (2...
  • 我的环境 JDK 1.8 maven 3.6.0 node环境 1.为什么需要前后端项目开发时分离,部署时合并? ...针对这种情况这里采用的在开发中做到前后端独立开发,打包时在后端springboot打包发布时将前端的...
  • 配置文件,解决不同命令下项目启动和打包到指定的环境
  • Gradle建造的SpringBoot + Vue前进行分离(含移动端)并合并打包的基本框架 子项目说明 tool 后端工具子项目 common 后端通用子项目 server 后端Api接口子项目 web WEB端Vue子项目 webapp 移动端Vue子项目 建造时...
  • 在linux系统中导入我们的若依项目我们首先要把项目打包,后端要打成jar包,同样的前端也需要打包,后端因为编译器不同打包方式不同这里就不多做解释了,前端的话在若依官网环境部署中有代码打包方式,这里也就不多做...
  • 在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法。(欢迎纠错,谢谢。)1. 安装插件cross-env,npminstallcross...
  • vue项目打包后跨域

    千次阅读 2019-11-17 18:56:36
    对于上篇文章的生产环境的跨域地址配置,是将所有接口的访问都指向同一个服务器,而对于前后端未完全分离的项目,如果有某个接口需要访问非当前项目的另一台服务器的话,就需要对这个接口单独进行处理了,针对这个...
  • 玩过最新版Dubbo管控台的都知道,人家是个前后端分离的项目,可是一条打包命令能让两个项目整合在一起,生成一个jar包,这样的好处显而易见,部署的时候服务器不需要安装node环境单独部署前端项目,或者也不需要在写...
  • 在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法。(欢迎纠错,谢谢。) 1. 安装插件 cross-env,npm install...
  • 演示项目是SpringBoot+VUE前后端分离的。需要分别部署前端、后端项目,做集群的话需要将后端项目部署到多台服务器中。 使用的技术及服务器: – Linux系统:Centos7 – 前端:VUE+Nginx – 后端:SpringBoot+JDK...
  • 同时可以方便其他同学在使用到的时候参考一下(自己也备忘),有不对的地方,欢迎指出~~记录下如何使用Jenkins自动打包、部署Vue前端应用(对于所有前后端分离的前端静态项目都通用)3、本篇环境信息服务器操作系统硬件...
  • 在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法。(欢迎纠错,谢谢。) 1. 安装插件cross-env,...
  • 一、开发环境先进行打包 如果你使用的是maven来管理项目,执行以下命令既可以 cd 项目跟目录(和pom.xml同级) mvn clean package 或者执行下面的命令排除测试代码后进行打包(正式环境使用) mvn clean package...
  • 使用vue-cli2打包了项目 后端运行在flask自带的服务器上,地址和端口为http://127.0.0.1:9999 建立连接本质上是用webpack提供的devserver,也就是简单的前端服务器(前后端分离)然后代理到后端 所以将webpack.dev....
  • Django3.0和Vue前后端分离以及访问静态文件 文章目录前言一、Django创建工程(vue_Django)1.使用Pycharm二、创建Vue项目1. 在Django的工程(vue_Django)下创建Vue项目2. 将myVue项目打包三、更改Django内配置运行...
  • Vue CLI 是基于 Node 环境,集成了 Webpack 对文件进行编译、压缩、打包、ES6 转 ES5等一系列操作,目前最新的 Vue CLI 为 4.1.x 版本。 为什么要使用 Vue CLI 如果我们手动从零开始搭建 Vue 的开发环境,会遇到很多...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 186
精华内容 74
关键字:

vue环境分离打包

vue 订阅