手把手教你搞定 vue-cli4 配置

╰+哭是因爲堅強的太久メ 2023-10-11 14:23 6阅读 0赞

*  [√ 配置多环境变量][Link 1]
 *  [√ 配置基础 vue.config.js][_ vue.config.js]
 *  [√ 配置 proxy 跨域][_ proxy]
 *  [√ 修复 HMR(热更新)失效][_ HMR]
 *  [√ 修复 Lazy loading routes Error： Cyclic dependency][_ Lazy loading routes Error_ Cyclic dependency]
 *  [√ 添加别名 alias][_ alias]
 *  [√ 压缩图片][Link 2]
 *  [√ 自动生成雪碧图][Link 3]
 *  [√ SVG 转 font 字体][SVG _ font]
 *  [√ 使用 SVG 组件][_ SVG]
 *  [√ 去除多余无效的 css][_ css]
 *  [√ 添加打包分析][Link 4]
 *  [√ 配置 externals 引入 cdn 资源][_ externals _ cdn]
 *  [√ 多页面打包 multi-page][_ multi-page]
 *  [√ 删除 moment 语言包][_ moment]
 *  [√ 去掉 console.log][_ console.log]
 *  [√ 利用 splitChunks 单独打包第三方模块][_ splitChunks]
 *  [√ 开启 gzip 压缩][_ gzip]
 *  [√ 开启 stylelint 检测scss, css语法][_ stylelint _scss_ css]
 *  [√ 为 sass 提供全局样式，以及全局变量][_ sass]
 *  [√ 为 stylus 提供全局变量][_ stylus]
 *  [√ 预渲染 prerender-spa-plugin][_ prerender-spa-plugin]
 *  [√ 添加 IE 兼容][_ IE]
 *  [√ 静态资源自动打包上传阿里 oss、华为 obs][_ oss_ obs]
 *  [√ 完整依赖][Link 5]

#### ![✅][format_png] 配置多环境变量 ####

通过在 package.json 里的 scripts 配置项中添加–mode xxx 来选择不同环境

只有以 VUE\_APP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，代码中可以通过 process.env.VUE\_APP\_BASE\_API 访问

NODE\_ENV 和 BASE\_URL 是两个特殊变量，在代码中始终可用

配置

在项目根目录中新建.env, .env.production, .env.analyz 等文件

*  .env

serve 默认的本地开发环境配置

NODE_ENV = "development"
    
    BASE_URL = "./"
    
    VUE_APP_PUBLIC_PATH = "./"
    
    VUE_APP_API = "https://test.staven630.com/api"复制代码

*  .env.production

build 默认的环境配置（正式服务器）

NODE_ENV = "production"
    
    BASE_URL = "https://prod.staven630.com/"
    
    VUE_APP_PUBLIC_PATH = "https://prod.oss.com/staven-blog"
    
    VUE_APP_API = "https://prod.staven630.com/api"
    
      
    
    ACCESS_KEY_ID = "xxxxxxxxxxxxx"
    
    ACCESS_KEY_SECRET = "xxxxxxxxxxxxx"
    
    REGION = "oss-cn-hangzhou"
    
    BUCKET = "staven-prod"
    
    PREFIX = "staven-blog"复制代码

*  .env.crm

自定义 build 环境配置（预发服务器）

NODE_ENV = "production"
    
    BASE_URL = "https://crm.staven630.com/"
    
    VUE_APP_PUBLIC_PATH = "https://crm.oss.com/staven-blog"
    
    VUE_APP_API = "https://crm.staven630.com/api"
    
      
    
    ACCESS_KEY_ID = "xxxxxxxxxxxxx"
    
    ACCESS_KEY_SECRET = "xxxxxxxxxxxxx"
    
    REGION = "oss-cn-hangzhou"
    
    BUCKET = "staven-crm"
    
    PREFIX = "staven-blog"
    
      
    
    IS_ANALYZE = true;复制代码

修改 package.json

"scripts": {
    
    "build": "vue-cli-service build",
    
    "crm": "vue-cli-service build --mode crm"
    
    }复制代码

使用环境变量

<template>
    
    <div class="home">
    
    
    
    API: {
       { api }}
    
    </div>
    
    </template>
    
      
    
    <script>
    
    export default {
    
    name: "home",
    
    data() {
    
    return {
    
    api: process.env.VUE_APP_API
    
    };
    
    },
    
    mounted() {
    
    // js代码中使用环境变量
    
    console.log("BASE_URL: ", process.env.BASE_URL);
    
    console.log("VUE_APP_API: ", process.env.VUE_APP_API);
    
    }
    
    };
    
    </script>复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 配置基础 vue.config.js ####

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
    
      
    
    module.exports = {
    
    publicPath: IS_PROD ? process.env.VUE_APP_PUBLIC_PATH : "./", // 默认'/'，部署应用包时的基本 URL
    
    // outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
    
    // assetsDir: "", // 相对于outputDir的静态资源(js、css、img、fonts)目录
    
    lintOnSave: false,
    
    runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
    
    productionSourceMap: !IS_PROD, // 生产环境的 source map
    
    parallel: require("os").cpus().length > 1,
    
    pwa: {}
    
    };复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 配置 proxy 代理解决跨域问题 ####

假设 mock 接口为[www.easy-mock.com/mock/5bc75b…][www.easy-mock.com_mock_5bc75b]

module.exports = {
    
    devServer: {
    
    // overlay: { // 让浏览器 overlay 同时显示警告和错误
    
    // warnings: true,
    
    // errors: true
    
    // },
    
    // open: false, // 是否打开浏览器
    
    // host: "localhost",
    
    // port: "8080", // 代理断就
    
    // https: false,
    
    // hotOnly: false, // 热更新
    
    proxy: {
    
    "/api": {
    
    target:
    
    "https://www.easy-mock.com/mock/5bc75b55dc36971c160cad1b/sheets", // 目标代理接口地址
    
    secure: false,
    
    changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
    
    // ws: true, // 是否启用websockets
    
    pathRewrite: {
    
    "^/api": "/"
    
    }
    
    }
    
    }
    
    }
    
    };复制代码

访问

[▲ 回顶部][Link 6]

#### ![✅][format_png] 修复 HMR(热更新)失效 ####

如果热更新失效，如下操作：

module.exports = {
    
    chainWebpack: config => {
    
    // 修复HMR
    
    config.resolve.symlinks(true);
    
    }
    
    };复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 修复 Lazy loading routes Error： Cyclic dependency [https://github.com/vuejs/vue-cli/issues/1669][https_github.com_vuejs_vue-cli_issues_1669] ####

module.exports = {
    
    chainWebpack: config => {
    
    // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
    
    config.plugin("html").tap(args => {
    
    // 修复 Lazy loading routes Error
    
    args[0].chunksSortMode = "none";
    
    return args;
    
    });
    
    }
    
    };复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 添加别名 alias ####

const path = require("path");
    
    const resolve = dir => path.join(__dirname, dir);
    
    const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
    
      
    
    module.exports = {
    
    chainWebpack: config => {
    
    // 添加别名
    
    config.resolve.alias
    
    .set("vue$", "vue/dist/vue.esm.js")
    
    .set("@", resolve("src"))
    
    .set("@assets", resolve("src/assets"))
    
    .set("@scss", resolve("src/assets/scss"))
    
    .set("@components", resolve("src/components"))
    
    .set("@plugins", resolve("src/plugins"))
    
    .set("@views", resolve("src/views"))
    
    .set("@router", resolve("src/router"))
    
    .set("@store", resolve("src/store"))
    
    .set("@layouts", resolve("src/layouts"))
    
    .set("@static", resolve("src/static"));
    
    }
    
    };复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 压缩图片 ####

npm i -D image-webpack-loader复制代码

在某些版本的 OSX 上安装可能会因缺少 libpng 依赖项而引发错误。可以通过安装最新版本的 libpng 来解决。

brew install libpng复制代码

module.exports = {
    
    chainWebpack: config => {
    
    if (IS_PROD) {
    
    config.module
    
    .rule("images")
    
    .use("image-webpack-loader")
    
    .loader("image-webpack-loader")
    
    .options({
    
    mozjpeg: { progressive: true, quality: 65 },
    
    optipng: { enabled: false },
    
    pngquant: { quality: [0.65, 0.9], speed: 4 },
    
    gifsicle: { interlaced: false }
    
    // webp: { quality: 75 }
    
    });
    
    }
    
    }
    
    };复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 自动生成雪碧图 ####

默认 src/assets/icons 中存放需要生成雪碧图的 png 文件。首次运行 npm run serve/build 会生成雪碧图，并在跟目录生成 icons.json 文件。再次运行命令时，会对比 icons 目录内文件与 icons.json 的匹配关系，确定是否需要再次执行 webpack-spritesmith 插件。

npm i -D webpack-spritesmith复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] SVG 转 font 字体 ####

npm i -D svgtofont复制代码

根目录新增 scripts 目录，并新建 svg2font.js 文件：

添加 package.json scripts 配置：

"prebuild": "npm run font",
    
    "font": "node scripts/svg2font.js",复制代码

执行：

npm run font复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 使用 SVG 组件 ####

npm i -D svg-sprite-loader复制代码

新增 SvgIcon 组件。

<template>
    
    <svg class="svg-icon"
    
    aria-hidden="true">
    
    <use :xlink:href="iconName" />
    
    </svg>
    
    </template>
    
      
    
    <script>
    
    export default {
    
    name: 'SvgIcon',
    
    props: {
    
    iconClass: {
    
    type: String,
    
    required: true
    
    }
    
    },
    
    computed: {
    
    iconName() {
    
    return `#icon-${this.iconClass}`
    
    }
    
    }
    
    }
    
    </script>
    
      
    
    <style scoped>
    
    .svg-icon {
    
    width: 1em;
    
    height: 1em;
    
    vertical-align: -0.15em;
    
    fill: currentColor;
    
    overflow: hidden;
    
    }
    
    </style>复制代码

在 src 文件夹中创建 icons 文件夹。icons 文件夹中新增 svg 文件夹（用来存放 svg 文件）与 index.js 文件：

import SvgIcon from "@/components/SvgIcon";
    
    import Vue from "vue";
    
      
    
    // 注册到全局
    
    Vue.component("svg-icon", SvgIcon);
    
      
    
    const requireAll = requireContext => requireContext.keys().map(requireContext);
    
    const req = require.context("./svg", false, /\.svg$/);
    
    requireAll(req);复制代码

在 main.js 中导入 icons/index.js

import "@/icons";复制代码

前面已经全局注册了，所以可以直接使用

修改 vue.config.js

[▲ 回顶部][Link 6]

#### ![✅][format_png] 去除多余无效的 css ####

注：谨慎使用。可能出现各种样式丢失现象。

*  方案一：@fullhuman/postcss-purgecss

npm i -D postcss-import @fullhuman/postcss-purgecss复制代码

更新 postcss.config.js

*  方案二：purgecss-webpack-plugin

npm i -D glob-all purgecss-webpack-plugin复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 添加打包分析 ####

[▲ 回顶部][Link 6]

#### ![✅][format_png] 配置 externals 引入 cdn 资源 ####

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖

module.exports = {
    
    configureWebpack: config => {
    
    config.externals = {
    
    vue: "Vue",
    
    "element-ui": "ELEMENT",
    
    "vue-router": "VueRouter",
    
    vuex: "Vuex",
    
    axios: "axios"
    
    };
    
    },
    
    chainWebpack: config => {
    
    const cdn = {
    
    // 访问https://unpkg.com/element-ui/lib/theme-chalk/index.css获取最新版本
    
    css: ["//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css"],
    
    js: [
    
    "//unpkg.com/vue@2.6.10/dist/vue.min.js", // 访问https://unpkg.com/vue/dist/vue.min.js获取最新版本
    
    "//unpkg.com/vue-router@3.0.6/dist/vue-router.min.js",
    
    "//unpkg.com/vuex@3.1.1/dist/vuex.min.js",
    
    "//unpkg.com/axios@0.19.0/dist/axios.min.js",
    
    "//unpkg.com/element-ui@2.10.1/lib/index.js"
    
    ]
    
    };
    
      
    
    // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
    
    config.plugin("html").tap(args => {
    
    // html中添加cdn
    
    args[0].cdn = cdn;
    
    return args;
    
    });
    
    }
    
    };复制代码

在 html 中添加

<% for (var i in htmlWebpackPlugin.options.cdn &&
    
    htmlWebpackPlugin.options.cdn.css) { %>
    
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
    
    <% } %>
    
      
    
    
    
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    
    htmlWebpackPlugin.options.cdn.js) { %>
    
    <script
    
    type="text/javascript"
    
    src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"
    
    ></script>
    
    <% } %>
    
    复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 多页面打包 multi-page ####

多入口页面打包，建议在 src 目录下新建 pages 目录存放多页面模块。

*  pages.config.js

配置多页面信息。src/main.js 文件对应 main 字段，其他根据参照 pages 为根路径为字段。如下:

module.exports = {
    
    'admin': {
    
    template: 'public/index.html',
    
    filename: 'admin.html',
    
    title: '后台管理',
    
    },
    
    'mobile': {
    
    template: 'public/index.html',
    
    filename: 'mobile.html',
    
    title: '移动端',
    
    },
    
    'pc/crm': {
    
    template: 'public/index.html',
    
    filename: 'pc-crm.html',
    
    title: '预发服务',
    
    }
    
    }复制代码

*  vue.config.js

vue.config.js 的 pages 字段为多页面提供配置

如果多页面打包需要使用 CDN，使用 vue inspect --plugins 查看 html 是否在结果数组中的形式。上例中 plugins 列表中存在’html-main’,‘html-pages/admin’,‘html-pages/mobile’， 没有’html’。因此不能再使用 config.plugin(“html”)。

[▲ 回顶部][Link 6]

#### ![✅][format_png] 删除 moment 语言包 ####

删除 moment 除 zh-cn 中文包外的其它语言包，无需在代码中手动引入 zh-cn 语言包。

const webpack = require("webpack");
    
      
    
    module.exports = {
    
    chainWebpack: config => {
    
    config
    
    .plugin("ignore")
    
    .use(
    
    new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/)
    
    );
    
      
    
    return config;
    
    }
    
    };复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 去掉 console.log ####

方法一：使用 babel-plugin-transform-remove-console 插件

npm i -D babel-plugin-transform-remove-console复制代码

在 babel.config.js 中配置

方法二：

如果使用 uglifyjs-webpack-plugin 会报错，可能存在 node\_modules 中有些依赖需要 babel 转译。

而 vue-cli 的[transpileDependencies][]配置默认为\[\], babel-loader 会忽略所有 node\_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。配置需要转译的第三方库。

[▲ 回顶部][Link 6]

#### 利用 splitChunks 单独打包第三方模块 ####

[▲ 回顶部][Link 6]

#### ![✅][format_png] 开启 gzip 压缩 ####

npm i -D compression-webpack-plugin复制代码

还可以开启比 gzip 体验更好的 Zopfli 压缩详见[webpack.js.org/plugins/com…][webpack.js.org_plugins_com]

npm i -D @gfx/zopfli brotli-webpack-plugin复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 开启 stylelint 检测scss, css语法 ####

npm i -D stylelint stylelint-config-standard stylelint-config-prettier stylelint-webpack-plugin复制代码

在文件夹创建stylelint.config.js,详细配置在[这里][Link 7]

module.exports = {
    
    ignoreFiles: ["**/*.js", "src/assets/css/element-variables.scss", "theme/"],
    
    extends: ["stylelint-config-standard", "stylelint-config-prettier"],
    
    rules: {
    
    "no-empty-source": null,
    
    "at-rule-no-unknown": [
    
    true,
    
    {
    
    ignoreAtRules: ["extend"]
    
    }
    
    ]
    
    }
    
    };复制代码

启用webpack配置

[▲ 回顶部][Link 6]

#### ![✅][format_png] 为 sass 提供全局样式，以及全局变量 ####

可以通过在 main.js 中 Vue.prototype.KaTeX parse error: Expected 'EOF', got '挂' at position 39: …PP\_PUBLIC\_PATH;挂̲载环境变量中的配置信息，然后在…src 访问。

css 中可以使用注入 sass 变量访问环境变量中的配置信息

在 scss 中引用

.home {
    
    background: url($src+"/images/500.png");
    
    }复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 为 stylus 提供全局变量 ####

npm i -D style-resources-loader复制代码

[▲ 回顶部][Link 6]

#### 预渲染 prerender-spa-plugin ####

npm i -D prerender-spa-plugin复制代码

mounted()中添加 document.dispatchEvent(new Event(‘render-event’))

new Vue({
    
    router,
    
    store,
    
    render: h => h(App),
    
    mounted() {
    
    document.dispatchEvent(new Event("render-event"));
    
    }
    
    }).$mount("#app");复制代码

为自定义预渲染页面添加自定义 title、description、content

*  删除 public/index.html 中关于 description、content 的 meta 标签。保留 title 标签
 *  配置 router-config.js

module.exports = {
    
    "/": {
    
    title: "首页",
    
    keywords: "首页关键词",
    
    description: "这是首页描述"
    
    },
    
    "/about.html": {
    
    title: "关于我们",
    
    keywords: "关于我们页面关键词",
    
    description: "关于我们页面关键词描述"
    
    }
    
    };复制代码

*  vue.config.js

[▲ 回顶部][Link 6]

#### ![✅][format_png] 添加 IE 兼容 ####

npm i -S @babel/polyfill复制代码

在 main.js 中添加

import "@babel/polyfill";复制代码

配置 babel.config.js

const plugins = [];
    
      
    
    module.exports = {
    
    presets: [["@vue/app", { useBuiltIns: "entry" }]],
    
    plugins: plugins
    
    };复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 静态资源自动打包上传阿里 oss、华为 obs ####

开启文件上传 ali oss，需要将 publicPath 改成 ali oss 资源 url 前缀,也就是修改 VUE\_APP\_PUBLIC\_PATH。具体配置参见[阿里 oss 插件 webpack-oss][oss _ webpack-oss]、[华为 obs 插件 huawei-obs-plugin][obs _ huawei-obs-plugin]

npm i -D webpack-oss复制代码

[▲ 回顶部][Link 6]

#### ![✅][format_png] 完整配置 ####

[Link 1]: https://www.imooc.com/article/301993#env
[_ vue.config.js]: https://www.imooc.com/article/301993#base
[_ proxy]: https://www.imooc.com/article/301993#proxy
[_ HMR]: https://www.imooc.com/article/301993#hmr
[_ Lazy loading routes Error_ Cyclic dependency]: https://www.imooc.com/article/301993#lazyloading
[_ alias]: https://www.imooc.com/article/301993#alias
[Link 2]: https://www.imooc.com/article/301993#compressimage
[Link 3]: https://www.imooc.com/article/301993#spritesmith
[SVG _ font]: https://www.imooc.com/article/301993#font
[_ SVG]: https://www.imooc.com/article/301993#svg
[_ css]: https://www.imooc.com/article/301993#removecss
[Link 4]: https://www.imooc.com/article/301993#analyze
[_ externals _ cdn]: https://www.imooc.com/article/301993#externals
[_ multi-page]: https://www.imooc.com/article/301993#multiple-pages
[_ moment]: https://www.imooc.com/article/301993#moment
[_ console.log]: https://www.imooc.com/article/301993#log
[_ splitChunks]: https://www.imooc.com/article/301993#splitchunks
[_ gzip]: https://www.imooc.com/article/301993#gzip
[_ stylelint _scss_ css]: https://www.imooc.com/article/301993#stylelint
[_ sass]: https://www.imooc.com/article/301993#globalscss
[_ stylus]: https://www.imooc.com/article/301993#globalstylus
[_ prerender-spa-plugin]: https://www.imooc.com/article/301993#prerender
[_ IE]: https://www.imooc.com/article/301993#ie
[_ oss_ obs]: https://www.imooc.com/article/301993#alioss
[Link 5]: https://www.imooc.com/article/301993#allconfig
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuaW1vb2MuY29tL3N0YXRpYy9tb2NvL3YxLjAvaW1hZ2VzL2ZhY2UvMzZ4MzYvMjcwNS5wbmc?x-oss-process=image/format,png
[Link 6]: https://www.imooc.com/article/301993#top
[www.easy-mock.com_mock_5bc75b]: https://www.easy-mock.com/mock/5bc75b55dc36971c160cad1b/sheets/1
[https_github.com_vuejs_vue-cli_issues_1669]: https://github.com/vuejs/vue-cli/issues/1669
[transpileDependencies]: https://cli.vuejs.org/zh/config/#transpiledependencies
[webpack.js.org_plugins_com]: https://webpack.js.org/plugins/compression-webpack-plugin
[Link 7]: https://stylelint.io/user-guide/configuration
[oss _ webpack-oss]: https://github.com/staven630/webpack-oss
[obs _ huawei-obs-plugin]: https://github.com/staven630/huawei-obs-plugin