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

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