Vue-cli 使用小计

官网: https://cli.vuejs.org/zh/guide/

vue-cli 版本

@vue/cli 4.5.6

vue 版本

~2.6.0

创建项目后less 或者 css 使用报错。版本不匹配。一般需要降级

less-loader版本太高，可以卸载重装低版本
卸载重装：npm uninstall less-loader
安装低版本：npm install --save-dev less-loader@4.1.0
在项目的文件package.json可以看到less-loader的版本

如果创建项目中途报错

简单暴力的方法解决,卸载所有,清除缓存,再来一次（有很大可能是版本变化导致-主要看错误说明是否涉及版本号）

npm uninstall -g vue
npm uninstall -g vue-cli
npm uninstall -g @vue/cli
npm cache clean --force
npm install -g @vue/cli

默认配置改动，配置了vue.config.js 将public 中默认index 放在根目录

---

vue.config.js 文件内容

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const CompressionWebpackPlugin = require('compression-webpack-plugin')
// const productionGzipExtensions = ['js', 'css']

const docEnv = process.env.NODE_ENV;
module.exports = {
    publicPath: docEnv === 'production' ? './' : './',
    outputDir: 'dist',
    assetsDir: 'assets',
    indexPath: 'index.html',
    lintOnSave: false,
    runtimeCompiler: true,
    productionSourceMap: false,
    css: {
        sourceMap: false,
        extract: true
    },
    configureWebpack: {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
                '@base': path.resolve(__dirname, './'),
            }
        },
        plugins: [
            // 下面是下载的插件的配置
            /* new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }), */
            new webpack.optimize.LimitChunkCountPlugin({
                maxChunks: 5,
                minChunkSize: 1000
            }),
            new HtmlWebpackPlugin({ // 打包输出HTML
                minify: { // 压缩HTML文件
                    removeComments: true, // 移除HTML中的注释
                    collapseWhitespace: true, // 删除空白符与换行符
                    minifyCSS: true// 压缩内联css
                },
                filename: 'index.html',
                template: path.join(__dirname, 'index.html')
            })
        ]
    },
    /* chainWebpack: config => {
        config
        .plugin('html')
        .tap(args => {
            args[0].template = path.join(__dirname, 'index.html')
            return args
        })
    }, */
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: false,
        port: 9000,
        clientLogLevel: 'silent',
        hot: true,
        index: 'index.html',
        inline: true,
        overlay: {
            warnings: true,
            errors: false
        },
        proxy: {
            '/api': {
                // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
                // target: 'https://www.baidu.com/',
                target: '',
                // 允许跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            },
            '/service': {
                target: '',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/service': ''
                }
            }
        }
    }
}

---

babel.config.js 文件内容

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    
  ]
}

## node-sass安装报错

> node-sass 和 sass-loader 版本不对应导致报错需要使用对应版本
如： node 14.0+ node-sass ^6.0.1 sass-loader ^10.0.1

## vue proxy 本地代理报错 500

> 500 服务器错误，代理配置正常，要考虑是否能在局域网环境下访问接口，如果不能则换成热点尝试，大概率是网络环境问题

package.json 文件内容

（如果出现问题，有可能是依赖版本不匹配。需要对照lock 文件）

{
  "name": "yuntech-project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.20.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.13.0",
    "compression-webpack-plugin": "^6.0.1",
    "core-js": "^3.6.5",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "html-webpack-plugin": "^4.4.1",
    "less": "^3.12.2",
    "less-loader": "^7.0.1",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}