vue从创建项目到兼容ie的配置

vue从创建项目到兼容ie的配置

安装vue

npm install -g @vue/cli
yarn global add @vue/cli

创建项目

vue create 项目名称

添加UI框架

vue ui

安装相关插件

$ npm install --save-dev babel/polyfill
npm i es6-promise -S-dev

在package.json文件中找到browserslist，并添加

 "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "ie 8"
  ]

main.js中引入

import '@babel/polyfill'
import promise from ‘es6-promise’;
promise.polyfill();

vue自定义配置

1）项目根目录新建vue.config.js文件

const path = require("path");
const isDevelop = process.env.NODE_ENV !== "production";
module.exports = {
  // publicPath: isDevelop ? "/" : "./",
  outputDir: "../production-enviroment",
  transpileDependencies: ["node_modules/*", "view-design", "moment"],
  // assetsDir: "assets",
  // // eslint-loader 保存的时候进行检查
  lintOnSave: true,
  // // webpack配置
  // chainWebpack: () => {
  //   if (isDevelop) {
  //     //开发环境配置
  //   } else {
  //     //生产环境配置
  //   }
  // },
  configureWebpack: (config) => {
    config.resolve = {
      extensions: [".js", ".json", ".vue", ".scss", ".png", ".jpg"],
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    };
  },
  // productionSourceMap: false,
  // css: {
  //   extract: true,
  //   sourceMap: false,
  //   // css预设器配置项
  //   loaderOptions: {},
  //   requireModuleExtension: false
  // },
  devServer: {
    open: true,
    host: "0.0.0.0",
    port: 8081,
    // https: false,
    // hot: true,
    // hotOnly: false,
    proxy: null,
    overlay: {
      // 全屏模式下是否显示脚本错误
      warnings: true,
      errors: true,
    },
  },
  /**
   * 第三方插件配置
   */
  pluginOptions: {},
};

2）项目根目录新建.eslintignore文件

文件内添加以下代码

/build/
/config/
/dist/
/src/utils/
/src/router/*.js

3）项目根目录新建.eslintrc.js文件

文件内添加以下代码

```javascript
module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint",
    sourceType: "module"
  },
  parser: "vue-eslint-parser",
  env: {
    browser: true,
    node: true,
    es6: true
  },
  // extends: "standard",
  // plugins: ["html"],
  rules: {
    "no-console": "off",
    // allow async-await
    "generator-star-spacing": "off",
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    // js语句结尾必须使用分号
    semi: ["off", "always"],
    // 三等号
    eqeqeq: 0,
    // 强制在注释中 // 或 /* 使用一致的空格
    "spaced-comment": 0,
    // 关键字后面使用一致的空格
    "keyword-spacing": 0,
    // 强制在 function的左括号之前使用一致的空格
    "space-before-function-paren": 0,
    // 引号类型
    quotes: [0, "single"],
    // 禁止出现未使用过的变量
    // 'no-unused-vars': 0,
    // 要求或禁止末尾逗号
    "comma-dangle": 0
  }
};

4）项目根目录新建.babelrc文件

文件内添加以下代码

```javascript
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "view-design",
        "libraryDirectory": "src/components"
      }
    ]
  ]
}