Vue（二）：2.0与3.0的差异、vue.config.js、引入全局样式、router重定向、elementui依赖、git命令提交文件

本文链接：https://blog.youkuaiyun.com/Start_Simple/article/details/123387711

1、2.0与3.0的差异

2.x构建项目
在这里插入图片描述
2.x目录

3.x目录

1、去除了 static、config、build
2、新增了 public
3、自动依赖node_modules
4、默认配置 webpack，通过 vue.config.js 修改
5、vue inspect 可查看webpack 默认配置
6、内置了 vue-cli-service serve 服务
7、浏览器打开图形界面，vue ui 查看

2、vue.config.js

创建好项目后会自动生成一个vue.config.js文件这里我们要进行更改配置

报错：1、vue文件提示:💥No Babel config file detected或💥vscode弹出Vetur can’t find tsconfig.json, jsconfig.json in /xxxx/xxxxxx.
报错：2、若打开vue.config.js或其他文件后第一行有波浪线提示但项目能正常运行💥 Parsing error: No Babel config file detected
1、配置.eslintrc.js文件添加 requireConfigFile: false,
2、设置eslint.enable ----取消勾选---- （从报错信息可以看出没有语法错误只是没有符合ESLint的规范）

在这里插入图片描述

vue.config.js配置

const path = require('path');
module.exports = {
   
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
  // 输出文件目录
  outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  /**
   * webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
   **/
  chainWebpack: (config) => {
   
  },
  configureWebpack: (config) => {
   
    // config.resolve = { // 配置解析别名
    //   extensions: ['.js', '.json', '.vue'],
    //   alias: {
   
    //     '@': path.resolve(__dirname, './src'),
    //     'public': path.resolve(__dirname, './public'),
    //     'components': path.resolve(__dirname, './src/components'),
    //     'common': path.resolve(__dirname, './src/common'),
    //     'api': path.resolve(__dirname, './src/api'),
    //     'views': path.resolve(__dirname, './src/views'),
    //     'data': path.resolve(__dirname, './src/data')
    //   }
    // }
  },
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相关配置
  css: {
   
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
   
      // 如发现 css.modules 报错，请查看这里：http://www.web-jshtml.cn/#/detailed?id=12
      sass: {
    
        data: `@import "./src/styles/main.scss";`
      }
    },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus()