精华内容
下载资源
问答
  • vue打包分离config配置文件
    千次阅读
    2019-03-14 09:25:54

    用vue-cli构建的项目通常是采用前后端分离的开发模式,也就是前端与后台完全分离,此时就需要将后台接口地址打包进项目中,此时如果只是改个接口地址也要重新打包那就太麻烦了,解决方法是直接加个config.js文件

    1.首先我们在static文件下建立一个js文件,就叫config.js吧,内容为

    window.g = {
      AXIOS_TIMEOUT: 10000,
      ApiUrl: 'http://localhost:21021/api/services/app', // 配置服务器地址,
      ParentPage: {
        CrossDomainProxyUrl: '/Home/CrossDomainProxy',
        BtnsApi: '/api/services/app/Authorization/GetBtns',
        OrgsApi: '/api/services/app/authorization/GetOrgsByUserId'
      },
    }
     
    

    2.接下来我们只需要在index.html这个入口文件里引入该文件(注意路径就ok)

    <script type="text/javascript" src="/static/config.js"></script>
    3.然后你就可以在你需要的地方随意获取就行了,比如
    
    var baseURLStr = window.g.ApiUrl
    // 创建axios实例
    const service = axios.create({
      baseURL: baseURLStr, // api的base_url
      timeout: 5000 // 请求超时时间
    })
    

    4.最后在打包成功之后,config,js文件不会被打包,依然存在static文件夹下,如果需要修改只需要用记事本打开文件修改地址就OK了,而且该方法也不会影响开发模式。

    更多相关内容
  • 今天很郁闷,遇到这样一个奇葩问题,使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错误,折腾半天才解决好,下面小编把Vue项目webpack打包部署到Tomcat刷新报404错误问题的...
  • vue前端分离打包部署

    千次阅读 2019-03-30 16:16:47
    vue前端分离打包部署 项目配置 congig/index.js 修改 assetsPublicPath: ‘./’ 运行npm run build 进行打包 centos nginx配置 下载安装包 cd /usr/local/software wget ...

    vue前端分离打包部署

    项目配置

    1. congig/index.js
      1. 修改 assetsPublicPath: ‘./’
    2. 运行npm run build 进行打包

    centos nginx配置

    1. 下载安装包

      • cd /usr/local/software
      • wget http://nginx.org/download/nginx-1.6.2.tar.gz
    2. 下载依赖库

      • yum install gcc-c++
      • yum install pcre
      • yum install pcre-devel
      • yum install zlib
      • yum install zlib-devel
      • yum install -y openssl
      • yum install -y openssl-devel
    3. 解压安装

      • tar -zxvf nginx-1.6.2.tar.gz -C /usr/local
        • (local这个目录类似于Windows的program目录,所以一些软件可以都安装在这里)
    4. 配置configure

      • cd /usr/local/nginx-1.6.2
      • ./configure --prefix=/usr/local/nginx
    5. 编译安装

      • make
      • make install
    6. 启动nginx

      • /usr/local/nginx/sbin/nginx
      • /usr/local/nginx/sbin/nginx -s stop
        • 此方式停止步骤是待nginx进程处理任务完毕进行停止。
      • /usr/local/nginx/sbin/nginx -s quit
        • 此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程。
      • /usr/local/nginx/sbin/nginx -s reload
    7. 查看nginx进程

      • ps aux | grep nginx
    8. nginx开机自启动设置

      • rc.local增加启动代码
        • vi /etc/rc.local
        • /usr/local/nginx/sbin/nginx
      • 更改权限
        • chmod 755 rc.local

    前端部署Nginx配置

    1. 把打包好的文件放在centos系统下的nginx文件目前里面
      1. /usr/local/nginx
    2. 进入/usr/local/nginx/conf文件夹 配置nginx.conf
    3. vim nginx.conf
    
    #user  root;
    worker_processes  1;
    
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    
    #pid        logs/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
        #                  '$status $body_bytes_sent "$http_referer" '
        #                  '"$http_user_agent" "$http_x_forwarded_for"';
    
        #access_log  logs/access.log  main;
    
        sendfile        on;
        #tcp_nopush     on;
    
        #keepalive_timeout  0;
        keepalive_timeout  65;
    
    	# 开启gzip压缩服务
    	gzip  on;
        gzip_proxied any;
        gzip_min_length  1024;
        gzip_buffers    4 8k;
        gzip_comp_level 3;
        gzip_types      text/plain text/css application/x-javascript application/javascript application/xml application/json;
    
        server {
            listen       8088;
    		# 监听8088端口
            server_name  localhost;
    		# 配置基于名称虚拟主机
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                root   dist;
    			autoindex on;
                index  index.html index.htm;
    			try_files $uri $uri/ /index.html;
    			autoindex_exact_size off;
    			autoindex_localtime on;
            }
    		location @router {
                rewrite ^.*$ /index.html last;
            }
    
    		# admin 服务API配置
    		location /admin {
                rewrite ^.+apis/?(.*)$ /$1 break;
    			proxy_pass http://192.168.16.116:9999/admin;
            }
            # 禁止直接访问static文件目录
    		location =/static/ {
    		  deny all;
    		}
    		
    		# 禁止直接访问static/js文件目录
    		location =/static/js/ {
    		  deny all;
    		}
    		
    		# 禁止直接访问static/fonts文件目录
    		location =/static/fonts/ {
    		  deny all;
    		}
    		
    		# 禁止直接访问static/css文件目录
    		location =/static/css/ {
    		  deny all;
    		}
            # error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            # error_page   500 502 503 504  /50x.html;
            # location = /50x.html {
            #    root   html;
            # }
    
            # proxy the PHP scripts to Apache listening on 127.0.0.1:80
            #
            #location ~ \.php$ {
            #    proxy_pass   http://127.0.0.1;
            #}
    
            # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
            #
            #location ~ \.php$ {
            #    root           html;
            #    fastcgi_pass   127.0.0.1:9000;
            #    fastcgi_index  index.php;
            #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
            #    include        fastcgi_params;
            #}
    
            # deny access to .htaccess files, if Apache's document root
            # concurs with nginx's one
            #
            #location ~ /\.ht {
            #    deny  all;
            #}
        }
    
    
        # another virtual host using mix of IP-, name-, and port-based configuration
        #
        #server {
        #    listen       8000;
        #    listen       somename:8080;
        #    server_name  somename  alias  another.alias;
    
        #    location / {
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}
    
    
        # HTTPS server
        #
        #server {
        #    listen       443 ssl;
        #    server_name  localhost;
    
        #    ssl_certificate      cert.pem;
        #    ssl_certificate_key  cert.key;
    
        #    ssl_session_cache    shared:SSL:1m;
        #    ssl_session_timeout  5m;
    
        #    ssl_ciphers  HIGH:!aNULL:!MD5;
        #    ssl_prefer_server_ciphers  on;
    
        #    location / {
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}
    
    }
    
    1. 重启nginx

    部署完毕可能出现的问题

    1. 外部访问不了,但是虚拟机能访问(无法打开到主机的连接。 在端口 23: 连接失败)
      • 造成原因:firewall防火墙原因
        • firewall-cmd --zone=public --list-all
          • 查看ports 端口
        • firewall-cmd --zone=public --query-port=80/tcp
          • 新增80端口
        • firewall-cmd --reload
          • 重启防火墙
        • reboot 重启centos
        • firewall-cmd --zone=public --list-all
          • 查看ports是否出现此端口,如果出现则配置成功
    展开全文
  • webpack打包vue项目的时候默认会把vue里的css打包到页面上。 webpack.config.js里的plugins加上以下配置 new webpack.LoaderOptionsPlugin({ test:/\.vue$/, options: { vue: { loaders: { css: ...
  • vue打包分离配置文件

    千次阅读 2019-08-05 16:47:45
    vue-cli3.x 添加一个serverConfig.json { "AppId": "2982b7ca5a", "token": "0F33CFBA-B4E0-4A9C-A54B-2B2DABEE7B15", "baseUrl": "" } 添加一个vue.config.js文件 var GenerateAssetPlugin = require('...

    vue-cli3.x

    添加一个serverConfig.json

    {
        "AppId": "2982b7ca5a",
        "token": "0F33CFBA-B4E0-4A9C-A54B-2B2DABEE7B15",
        "baseUrl": ""
    }

    添加一个vue.config.js文件

    var GenerateAssetPlugin = require('generate-asset-webpack-plugin');
    const serverConfig = require('./serverConfig.json') // 引入配置文件
    const createServerConfig = function(compilation) {
        return JSON.stringify(serverConfig);
    };
    module.exports = {
        configureWebpack: {
            plugins: [
                new GenerateAssetPlugin({
                    filename: 'serverConfig.json',
                    fn: (compilation, cb) => {
                        cb(null, createServerConfig(compilation));
                    },
                    extraFiles: []
                })
            ]
        }
    };

    在main.js中

    Vue.prototype.getConfigJson = function() {
        Vue.prototype.$axios.get('serverConfig.json').then((result) => {
            // console.log(result);
            Vue.prototype.baseConfig = result;
            store.commit('token', result.authorizeKey);
            // Vue.prototype.baseUrl = result.data.baseUrl; //设置成Vue的全局属性
            new Vue({
                router,
                store,
                render: h => h(App)
            }).$mount('#app')
        }).catch((error) => {
            console.log(error)
        })
    }
    Vue.prototype.getConfigJson() //调用声明的全局方法

    yarn run build生成可修改的配置文件,可以直接修改请求路径等,不需要重新打包

    展开全文
  • 本地开发没问题能正常请求到接口,部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况 对比了本地的页面 可以发现是remote address出了问题。 ... 我的猜想是proxy代理在本地环境下用的是...在Vue
  • 主要介绍了Spring Boot + Vue 前后端分离开发之前端网络请求封装与配置方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 基于vuecli的根据不同的环境调用不同的接口,本地代理跨域,第三方资源分离打包
  • 针对前后端完全分离项目,为不同环境配置不同的打包指令是非常必要的。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
    
    展开全文
  • 1) 安装node.js 从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入 node -v 命令,查看node的版本,若出现相应的版本号...3) 安装vue-cli2 脚手
  • vue项目中,通常是一个SPA应用,即所有的页面都是同一个html,通常现在开发也是前后端彻底分离的,vue打包后生成的纯静态文件,甚至可以不经过服务器,所以通过后端弄跳转之类的都不太优雅,本文即介绍此类场景的微
  • 遇到的问题 在多页面框架打包的过程中会... 就是使用splitChunks分割三方包,将三方包单独打包出来,根据页面的依赖情况自动注入,但是这种情况分离的三方包并不会自动注入到对应的页面中去,所以就写了个自动注入的插件
  • :将vue打包后放在springboot项目的resource下的static文件夹下,跟springboot项目一起被打成jar包 cd到vue项目目录下,执行npm run bulid:prod命令 (bulid:prod是我的正式环境的,可以在项目目录下的package....
  • vue项目打包分离库文件

    千次阅读 2019-02-26 09:55:41
    目的:将所有的库文件提出来,项目打包时不打包这些库文件。 以一个简易 vue\color{red}{vue}vue项目举例: 1.将库文件放入 static文件夹中 ├── src ├── static ├── img ├── css │ ├──...
  • 主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Spring Boot打打包包部部署署和和环环境境配配置置详详解解 这篇文章主要介绍了Spring Boot打包部署和环境配置详解文中通过示例代码介绍的非常详细对大家的学习或 者工 具有一定的参考学习价值需要的朋友们下面随着...
  • vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发,下面通过本文给大家分享vue 打包后的文件部署到express服务器上的方法,感兴趣的朋友一起看看吧
  • 主要介绍了部署vue+Springboot前后端分离项目的步骤实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue+springboot打包发布

    千次阅读 2020-10-08 14:30:06
    前面介绍过感觉vue和springboot的几篇文章,当一个项目做完了后,就该打包发布了。本节就研究下打包发布。...前后端分离,先看下如何分别打包vue前端打包,可以通过package.json里提供的命令。如:npm ru
  • 众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题。 什么是跨域?实现跨域的多种方式? ...
  • 2、打包 使用maven命令打包mvn clean package 使用Xftp将产生的jar包上传到服务器相关目录,我的放到了/usr/server/yuyun里面 3、运行 第一种方法 使用Xshell进入服务器目录,进行如下操作 cd /usr/server/yuyun //...
  • vue项目打包布署

    千次阅读 2021-12-25 13:35:47
    Vue项目打包部署本身不复杂,不过一些前端同学可能对服务器接触不多,部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题,内容概览: ...
  • Vue项目如何打包并部署(nginx)

    千次阅读 2022-04-08 16:10:48
    我们常使用前后端分离项目时,会需要将前端vue打包然后部署。 一.打包 vue项目其实可以直接通过一下语句进行打包: npm run build 默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便...
  • 如果管理页面是以根目录形式访问,那这里就不需要配置了,直接编译打包部署到nginx就可以了,但要加项目名的形式就需要部分修改了 假设管理页面项目名:admin 后端项目名:pro-api 修改文件.env.production //如果...
  • 一、打包前端项目 打开前端项目,使用npm run build命令进行打包打包成功后结果如下 这时,该项目目录下有一个build目录是打包好的文件 将该目录下的所有文件复制到后端Springboot项目的resources/static...
  • 一、SpringBoot 打包与部署 1、打包 //命令打包(-Dmaven.test.skip=true 跳过测试) mvn clean package -Dmaven.test.skip=true //idea不知道在哪输入命令?下边有张图 搞定之后如图,绿色反正比红色好看...
  • 1.vue-cli配置详情 css: { // 是否提取css生成单独的文件 默认 true ... } }, output: { // 输出重构 打包编译后的 文件名称 filename: `js/[name].js`, // chunkFilename: `js/[name].${conf.version}.js` }, },
  • 打包自己vue组建时,遇到一个问题,项目内的css文件无法单独打包出去。看到其他人的项目,都是install之后,可以引入一下js,引入一个css文件,就可以使用了。这块自己也研究了一下,如何vue组件项目中样式单独...
  • Vue-CLI构建前后端分离项目 1.项目环境初始化 1.安装 axios vue-axios(记得执行命令要进入项目里面执行哦,否则就会报错) E:\ideaProject\vue-cli-test>npm install --save axios vue-axios 2.main.js中...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,615
精华内容 5,446
关键字:

vue环境分离打包