第二节：三方库集成和配置(vue cli-webpack、element-plus、axios、vscode、区分不同环境)

一. vue cli-webpack配置

1. 说明

　在vue cli创建的项目中，配置文件为：vue.config.js

　vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

2. vue cli 基本配置

(详见：https://cli.vuejs.org/zh/config/#全局-cli-配置 )

(1). outputDir

(2). publicPath

剖析：

　　默认值为‘/’，生成的打包文件的引用的路径都是以/开头，没法直接在vscode中运行，需要部署后才能运行，

　　如果改为'./'，生成的打包文件的引用路径如下图，可以直接在vscode中运行

3. webpack配置

（详见：https://cli.vuejs.org/zh/guide/webpack.html#简单的配置方式）

　在vue cli创建的项目中，不能配置webpack.config.js文件，需要在vue.config.js中的configureWebpack 或 chainWebpack 属性中配置， configureWebpack 属性中的配置和webpack中的配置一样，自动就合并了。

补充：cli中，@符号已经默认配置了，对应的就是src目录，当然可以重写。

下面是几种写法：

const path = require('path');

module.exports = {
    //CLI提供的属性
    outputDir: './build',
    // publicPath: './', //打包后的可以直接使用，不用发布，默认是 '/'
    // webpack写法1(json格式)
    // 和webpack属性完全一致, 最后会进行合并
    configureWebpack: {
        resolve: {
            alias: {
                components: '@/components',
            },
        },
    },
    // webpack写法2（函数形式）
    // configureWebpack: (config) => {
    //   config.resolve.alias = {
    //     '@': path.resolve(__dirname, 'src'),
    //     components: '@/components'
    //   }
    // }
    // webpack写法3（链式编程）
    // chainWebpack: (config) => {
    //     config.resolve.alias
    //         .set('@', path.resolve(__dirname, 'src'))
    //         .set('components', '@/components');
    // },
};

二. element-plus配置

1. 全局引用

(1). 说明

(2). 步骤

2. 按需引用

(1). 说明

(2). 步骤

组件按需了，但是样式没有按需要

<template>
    <div>
        <el-button>默认按钮el-button>
        <el-button type="primary">主要按钮el-button>
        <el-button type="success">成功按钮el-button>
        <el-button type="info">信息按钮el-button>
    div>
template>

<script lang="ts">
    import { defineComponent } from 'vue';
    import { ElButton } from 'element-plus';
    import 'element-plus/dist/index.css';
    export default defineComponent({
        components: {
            ElButton,
        },
        setup() {
        },
    });
script>

<style lang="less">style>

三. axios配置

四. vscode配置

1. 在vscode中设置选项中，输入配置，然后选择settings.json，进行配置

2. 分享一个vscode的配置

{
  "workbench.iconTheme": "vscode-great-icons",
  "editor.fontSize": 17,
  "eslint.migration.2_x": "off",
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "files.autoSave": "afterDelay",
  "editor.tabSize": 2,
  "terminal.integrated.fontSize": 16,
  "editor.renderWhitespace": "all",
  "editor.quickSuggestions": {
    "strings": true
  },
  "debug.console.fontSize": 15,
  "window.zoomLevel": 1,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "explorer.confirmDragAndDrop": false,
  "workbench.tree.indent": 16,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.wordWrap": "on",
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "hediet.vscode-drawio.local-storage": "eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWw7YmFzaWM7YXJyb3dzMjtmbG93Y2hhcnQ7ZXI7c2l0ZW1hcDt1bWw7YnBtbjt3ZWJpY29uc1wiLFwiY3VzdG9tTGlicmFyaWVzXCI6W1wiTC5zY3JhdGNocGFkXCJdLFwicGx1Z2luc1wiOltdLFwicmVjZW50Q29sb3JzXCI6W1wiRkYwMDAwXCIsXCIwMENDNjZcIixcIm5vbmVcIixcIkNDRTVGRlwiLFwiNTI1MjUyXCIsXCJGRjMzMzNcIixcIjMzMzMzM1wiLFwiMzMwMDAwXCIsXCIwMENDQ0NcIixcIkZGNjZCM1wiLFwiRkZGRkZGMDBcIl0sXCJmb3JtYXRXaWR0aFwiOjI0MCxcImNyZWF0ZVRhcmdldFwiOmZhbHNlLFwicGFnZUZvcm1hdFwiOntcInhcIjowLFwieVwiOjAsXCJ3aWR0aFwiOjExNjksXCJoZWlnaHRcIjoxNjU0fSxcInNlYXJjaFwiOnRydWUsXCJzaG93U3RhcnRTY3JlZW5cIjp0cnVlLFwiZ3JpZENvbG9yXCI6XCIjZDBkMGQwXCIsXCJkYXJrR3JpZENvbG9yXCI6XCIjNmU2ZTZlXCIsXCJhdXRvc2F2ZVwiOnRydWUsXCJyZXNpemVJbWFnZXNcIjpudWxsLFwib3BlbkNvdW50ZXJcIjowLFwidmVyc2lvblwiOjE4LFwidW5pdFwiOjEsXCJpc1J1bGVyT25cIjpmYWxzZSxcInVpXCI6XCJcIn0ifQ==",
  "hediet.vscode-drawio.theme": "Kennedy",
  "editor.fontFamily": "Source Code Pro, 'Courier New', monospace",
  "editor.smoothScrolling": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "workbench.colorTheme": "Atom One Dark",
  "vetur.completion.autoImport": false,
  "security.workspace.trust.untrustedFiles": "open",
  "eslint.lintTask.enable": true,
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

五. 区分不同环境

1. 方案1-手动修改

(不可取)

//写法1：每次手动改
const BASE_URL = 'https://www.ypf.org/test';
const BASE_NAME = 'ypf';
export { BASE_URL, BASE_NAME };

2. 方案2-根据process.env.NODE_ENV进行区分

(推荐)

　　process.env.NODE_ENV ，是cli内置的一个值，开发环境下为，生产环境下为，测试环境下为

3. 方案3-编写不同环境变量配置文件

(推荐)

详见：https://cli.vuejs.org/zh/guide/mode-and-env.html#模式

作者 : Yaopengfei(姚鹏飞)
博客地址 : http://www.cnblogs.com/yaopengfei/
声明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
声明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。

第二节：三方库集成和配置(vue cli-webpack、element-plus、axios、vscode、区分不同环境)

相关

标签