Vue博客前端总结——项目配置

个人博客地址Baymax的博客

前言

一个项目的配置尤为重要，在博客项目中碰到了很多的坑，大部分都是由于配置导致的。这些配置解决了ie空白，路由懒加载防止页面加载太长。开发和生产环境不同要求配置，多页面配置（前台和后台在一个项目中），跨域问题等等。这些配置如果配置好，我相信能够为你解决不少问题和时间。

环境变量

env 文件需要声明运行的环境

使vue.config.js中根据不同环境进行配置

.env.development

NODE_ENV = development

.env.production

NODE_ENV = production

.env.development

定义变量需要以 VUE_APP_ 作为前缀

NODE_ENV = development
VUE_APP_BASE_URL = http://dev.myhost.com

测试变量是否生效, 可直接在 main.js 中打印测试、

console.log(process.env.VUE_APP_BASE_URL);

vue.config.js配置

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。详情配置请参考----Vue Cli 参考配置

此项配置了代码压缩，解决了ie空白，多页面配置，跨域（部分接口来自第三方网站），此配置文件根据具体需求配置。不适用其它项目。具体可以参考vue-cli4 全面配置(持续更新)

const CompressionWebpackPlugin = require('compression-webpack-plugin'); // gzip 压缩
const productionGzipExtensions = ['js', 'html', 'css'];
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//是否为生产环境
const IS_PROD = process.env.NODE_ENV === 'production';
module.exports = {
    //这个选项终于解决了Ie下空白的问题。如果项目在ie空白，就要配置此选项，主要原因在于第三方插件
    //默认情况下 babel-loader 会忽略所有 node_modules 中的文件。  
    //如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
    transpileDependencies: ['vue-savedata', 'vue-baberrage'],
    //多页面配置，因为我都前台和后台都在一个项目中。
    //每个“page”应该有一个对应的 JavaScript 入口文件
    pages: {
        about: {
            entry: 'src/pages/admin/main.js',
            template: 'public/admin.html',
            filename: 'admin.html',
            chunks: ['chunk-vendors', 'chunk-common', 'about'],
            title: 'BAYMAX后台管理'
        },
        index: {
            entry: 'src/pages/home/main.js',
            template: 'public/index.html',
            filename: 'index.html',
            chunks: ['chunk-vendors', 'chunk-common', 'index'],
            title: '云墨白'
        }
    },
    //如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下   
    //将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的devServer.proxy 选项来配置。在nginx配置请看下一节
    devServer: {
        sockHost: "localhost",
        disableHostCheck: true,
        port: 8080, // 端口号
        host: "0.0.0.0",
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        proxy: {
            "/apis": {
                // target: "http://127.0.0.1:80/api/v1", // 需要请求的地址
                target: process.env.VUE_APP_API_URL, // 需要请求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/apis": "" // 替换target中的请求地址，也就是说，在请求的时候，url用'/apis'代替'url'
                }
            },
            "/music": {
                target: "url", // 需要请求的地址
                // target: process.env.VUE_APP_URL,   // 需要请求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/music": "" // 替换target中的请求地址，也就是说，在请求的时候，url用'/music'代替'url
                }
            },
            "/english": {
                target: "url", // 需要请求的地址
                // target: process.env.VUE_APP_URL,   // 需要请求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/english": "" // 替换target中的请求地址，也就是说，在请求的时候，url用'/english'代替'url'
                }
            }
        }
    },
    productionSourceMap: !IS_PROD,
    configureWebpack: config => {
        // 用cdn方式引入，则构建时要忽略相关资源
        config.externals = {
            "mavon-editor": "MavonEditor",
            // vue: "Vue",
            // "element-ui": "ELEMENT",
            // "vue-router": "VueRouter",
            // vuex: "Vuex",
            // axios: "axios"
        };

        if (IS_PROD) {

            //gzip压缩
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), //匹配文件名
                threshold: 10240, //对超过10k的数据进行压缩
                minRatio: 0.8,
                deleteOriginalAssets: false //是否删除原文件
            }));
         
            // 代码压缩
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        //生产环境自动删除console
                        compress: {
                            // warnings: false, // 若打包错误，则注释这行
                            drop_debugger: true,
                            drop_console: true,
                            pure_funcs: ['console.log']
                        }
                    },
                    sourceMap: false,
                    parallel: true
                })
            )

        }
    },
    chainWebpack: config => {
        if (IS_PROD) {
            // 删除预加载
            config.plugins.delete('preload');
            config.plugins.delete('prefetch');
            // 压缩代码
            config.optimization.minimize(true);
            // ============压缩图片 start============
            config.module
                .rule('images')
                .use('image-webpack-loader')
                .loader('image-webpack-loader')
                .options({ bypassOnDebug: true })
                .end()
                // ============压缩图片 end============
        }
        return config;
    }
}

nginx服务器配置

反向代理用来解决前端跨域问题 此配置在服务器配置，本地只需在vue.config.js中配置

//Vue 路由history模式下需配置,配置路由跳转会出现404
location / {
      try_files $uri $uri/ /index.html;
    }
//反向代理
    location /apis {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass url;
    }
     location /music {
        proxy_pass url;
    }
    location /english {
        proxy_pass url;
    }

axios配置

易用、简洁且高效的http库。详情配置请参考---axios中文文档

import axios from 'axios'
import store from '../pages/home/store'
import { Notification } from 'element-ui';
import router from '@/pages/home/router'
//
var instance = axios.create({
//请求地址
    baseURL: process.env.VUE_APP_URL,
//超时时间
    timeout: 10000,
});
// 添加请求拦截器
instance.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    config.headers['Authorization'] = store.state.user.token
    config.headers['X-Requested-With'] = 'XMLHttpRequest'
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
//全局统一的错误拦截，需要跟后端统一
instance.interceptors.response.use(function(response) {
        // 对响应数据做点什么
        // Message('操作成功')
        if (response.headers.authorization) {
            store.dispatch("setToken", response.headers.authorization);
        }
        console.log(response.status)
        if (response.data.status == 'success') {
            return Promise.resolve(response.data)
        } else if (response.data.status == 'error') {
            Notification.error({
                title: '错误提示',
                message: response.data.message,
            })
        } else if (response.data.code == 200 || response.status == 200) {
            return Promise.resolve(response.data)
        } else {
            Notification.error({
                title: '错误提示',
                message: response.data.message,
            })
        }
        // 打印错误信息
        return Promise.reject(response.data)
    },
    function(error) {
        // 对响应错误做点什么
        switch (error.response.status) {
            case 400:
                Notification.warning({
                    title: '用户登录提示',
                    message: error.response.data.message,
                    onClose() {
                        store.dispatch("Logout");
                        router.push('/login')
                    },
                });
                break;
            case 401:
                Notification.warning({
                    title: '请求参数有误',
                    message: error.response.data.message,
                });
                break;
            case 403:
                Notification.warning({
                    title: '用户权限提示',
                    message: error.response.data.message,
                    onClose() {
                        router.push('/login')
                    },
                });
                break;
            case 404:
                Notification.warning({
                    title: '访问路径不正确',
                    message: error.response.data.message,
                });
                break;
            case 422:
                Notification.warning({
                    title: '温馨提示',
                    message: error.response.data.message,
                    onClose() {
                        store.dispatch("logOut")
                        router.push('/login')
                    },
                });
                break;
            case 429:
                Notification.warning({
                    title: '温馨提示',
                    message: error.response.data.message,
                });
                break;
            case 500:
                Notification.error({
                    title: '网络提示',
                    message: '服务器连接失败，请稍后再试',
                });
                break;
            default:
                Notification.error({
                    title: '错误提示 ' + error.response.status,
                    message: error.response.data.message,
                });

        }
        return Promise.reject(error)
    });
export default instance;

Element按需加载

网站快速成型工具
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。详情配置请参考---Element文档

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
安装 babel-plugin-component：
npm install babel-plugin-component -D

//在babel.config.js配置
const plugins = [
    [
        "component",
        {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
        }
    ]
];
module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset',
    ],
    plugins: plugins
};

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。详情配置请参考---Vue Router指南

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

import('./Foo.vue') // 返回 Promise
//下载syntax-dynamic-import 插件
npm install syntax-dynamic-import

本文为个人理解，若有不足，敬请指出

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,837评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,551评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,417评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,448评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,524评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,554评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,569评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,316评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,766评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,912评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,560评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2赞 352