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

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()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值