项目上线的优化

在vue.config.js文件中设置一个全局变量判断是生产模式还是开发者模式如果是生产模式就取消掉Elememt-ui的全局引入减少项目的依赖

chainWebpack: (config) => { //生产模式 config.when(process.env.NODE_ENV == "production", (config) => { config.entry("app").clear().add("./src/main-prod.js");

        //设置一个全局变量，在index.html中用来区分生产环境和开发环境
        config.plugin("html").tap((args) => {
            args[0].isProd = true;
            return args;
        });
    });
    config.set("externals", {
        vue: "Vue",
        // "vue-router": "VueRouter",
        axios: "axios",
        lodash: "_",
        echarts: "echarts",
        nprogress: "NProgress",
        // "vue-quill-editor": "VueQuillEditor"
    });
    //开发模式
    config.when(process.env.NODE_ENV == "development", (config) => {
        config.entry("app").clear().add("./src/main-dev.js");

        config.plugin("html").tap((args) => {
            args[0].isProd = false;
            return args;
        });
    });
},

在public中进行设置

在pubilc中的index.html使用模板字符串进行判断在vue官网中引入 <% if(htmlWebpackPlugin.options.isProd){ %>

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>

<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/theme-chalk/index.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/index.js"></script>
<% } %>

在package.json文件中设置

在scripts中添加一行自定义指令 "report": "vue-cli-service build --report"

main.js文件的配置

复制一份main.js文件 这是文件中共有两份main.js文件在mian的后面写上不同后缀分别为main-prod.js为生产这模式main-dev.js为开发者模式

项目的资源依赖

在终端中输入指令vue ui 进入项目打包把项目运行起来就可以了