项目中比较全面的 vue-cli 配置

vue-cli项目配置

{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.19.2",
"chokidar": "^2.1.8",
"core-js": "^3.12.1",
"dayjs": "^1.11.5",
"echarts": "^5.4.0",
"moment": "^2.29.1",
"vant": "^2.12.19",
"vconsole": "^3.5.2",
"vue": "^2.6.12",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.4.6",
"@vue/cli-plugin-eslint": "^4.4.6",
"@vue/cli-plugin-router": "^4.4.6",
"@vue/cli-plugin-vuex": "^4.4.6",
"@vue/cli-service": "^4.4.6",
"@vue/eslint-config-prettier": "^6.0.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^6.2.2",
"less": "^3.12.2",
"less-loader": "^7.0.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^7.0.1",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"postcss-pxtorem": "^5.1.1",
"prettier": "^1.19.1",
"sass-loader": "^10.0.1",
"terser-webpack-plugin": "^1.4.5",
"vconsole": "^3.10.0",
"vue-template-compiler": "^2.6.12"
}
}

vue.config.json

const path = require("path");
// const webpack = require("webpack");
const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");
//const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //css 处理
const TerserJSPlugin = require("terser-webpack-plugin"); // js 压缩
//const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); //css 压缩

const env =
process.env.NODE_ENV === "development" ? "development" : "production";
const isDev = () => env === "development";
// console.log(isDev(),'isDev~~~');

module.exports = {
// 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致
publicPath: "./",
// 输出文件目录
//outputDir: "../xxx",
outputDir: "./dist", //测试一下包的生成效果 // TODO
// 静态文件目录
// assetsDir: "static",
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
// 生产环境是否生成 sourceMap 文件
// productionSourceMap: false,
// 生成的 HTML 中的 \<link rel="stylesheet"\> 和 \<script\> 标签上启用 Subresource Integrity (SRI)
integrity: false,
// webpack 相关配置
chainWebpack: config => {
config.resolve.alias
.set("vue$", "vue/dist/vue.esm.js")
.set("@", path.resolve(**dirname, "./src"))
.set("@store", path.resolve(**dirname, "./src/store"))
.set("@base", path.resolve(\_\_dirname, "./"));
},

configureWebpack: {
mode: env === "production" ? "production" : "development",
optimization: !isDev()
? {
minimize: true,
minimizer: [new TerserJSPlugin({})]
}
: {}
},
// // css 相关配置
css: {
// // 是否分离 css（插件 ExtractTextPlugin）
extract: !isDev(), // true or false
// ignoreOrder: true
// // 是否开启 CSS source maps
sourceMap: isDev(), //TODO
// // css 预设器配置项
loaderOptions: {
less: {
lessOptions: {
javascriptEnabled: true,
globalVars: {
// primary: "#229be8", //暂不启用
}
}
},
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 50,
propList: ["*"],
// added by lee 2023 年 1 月 13 日 09:37:45
selectorBlackList:[
".no-rem-"
],
})
]
}
}
// // 是否启用 CSS modules for all css / pre-processor files.
// modules: false //已废弃 2022-09-22 18:07:25 by lee
// requireModuleExtension: false
},

// 是否使用 thread-loader
parallel: require("os").cpus().length > 1,
// PWA 插件相关配置
pwa: {},
// webpack-dev-server 相关配置
devServer: {
hot: true,
// open: true,
// host: "localhost",
// port: 8080,
// https: false,
// hotOnly: false,
// http 代理配置
proxy: {
"/api": {
target: "https://xxx.com/",
// target: "https://xxxxx/",
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
},
before: () => {}
},
// 第三方插件配置
pluginOptions: {}
};