vuecli打包器更换为rsbuild使其能加速编译 , 怎么重写vue.config.js和package.json , 可以根据我的文件进行重写吗
{
"version": "1.0.0",
"description": "",
"author": "",
"license": "MIT",
"scripts": {
"serve": "node --max-old-space-size=8184 ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
"big": "npm run serve",
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src",
"build:prod:zsczw": "vue-cli-service build --mode production_zsczw",
"build:prod:sdyj": "vue-cli-service build --mode production_sdyj",
"build:prod:rgyj": "vue-cli-service build --mode production_rgyj",
"build:prod:pxks": "vue-cli-service build --mode production_pxks",
"build:prod:zsyj": "vue-cli-service build --mode production_zsyj",
"build:prod:sdazx": "vue-cli-service build --mode production_sdazx",
"dev:zsczw": "vue-cli-service serve --mode test_zsczw",
"dev:sdyj": "vue-cli-service serve --mode test_sdyj",
"dev:rgyj": "vue-cli-service serve --mode test_rgyj",
"dev:pxks": "vue-cli-service serve --mode test_pxks",
"dev:zsyj": "vue-cli-service serve --mode test_zsyj",
"dev:sdazx": "vue-cli-service serve --mode test_sdazx"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
"keywords": [
"vue",
"admin",
"dashboard",
"element-ui",
"boilerplate",
"admin-template",
"management-system"
],
"repository": {
"type": "git",
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@element-plus/icons": "0.0.11",
"@jiaminghi/data-view": "^2.10.0",
"@riophae/vue-treeselect": "0.4.0",
"axios": "^0.21.4",
"cesium": "^1.96.0",
"clipboard": "2.0.6",
"coordtransform": "^2.1.2",
"core-js": "3.8.1",
"dayjs": "^1.11.11",
"echarts": "^4.8.0",
"echarts-gl": "^1.1.0",
"echarts-liquidfill": "^2.0.6",
"element-ui": "^2.15.5",
"ezuikit-js": "^7.6.3",
"file-saver": "2.0.4",
"fuse.js": "6.4.3",
"highlight.js": "9.18.5",
"hls.js": "^1.5.16",
"html2canvas": "^1.4.0",
"jquery": "^3.6.0",
"js-beautify": "1.13.0",
"js-cookie": "2.2.1",
"jsencrypt": "3.0.0-rc.1",
"mapvgl": "^1.0.0-beta.126",
"node-sass": "^4.14.1",
"normalize.css": "^8.0.1",
"nprogress": "0.2.0",
"particles.js": "^2.0.0",
"postcss-pxtorem": "^6.0.0",
"qrcodejs2": "0.0.2",
"quill": "1.3.7",
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
"spark-md5": "^3.0.2",
"three": "^0.130.1",
"v-drag": "^2.1.3",
"video.js": "^7.20.2",
"vue": "2.6.12",
"vue-3d-model": "^1.4.0",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-particles": "^1.0.9",
"vue-pdf": "^4.3.0",
"vue-qr": "^4.0.9",
"vue-router": "3.4.9",
"vue-video-player": "^5.0.2",
"vuedraggable": "2.24.3",
"vuescroll": "^4.17.3",
"vuex": "3.6.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.6",
"@vue/cli-plugin-eslint": "4.4.6",
"@vue/cli-service": "4.4.6",
"babel-eslint": "10.1.0",
"chalk": "4.1.0",
"code-inspector-plugin": "^0.20.1",
"compression-webpack-plugin": "^6.1.1",
"connect": "3.6.6",
"eslint": "7.15.0",
"eslint-plugin-vue": "7.2.0",
"less": "^4.1.2",
"less-loader": "^5.0.0",
"lint-staged": "10.5.3",
"postcss-px-to-viewport": "^1.1.1",
"promise": "^8.1.0",
"runjs": "4.4.2",
"sass-loader": "10.1.0",
"script-ext-html-webpack-plugin": "2.1.5",
"svg-sprite-loader": "5.1.1",
"vue-happy-scroll": "^2.1.1",
"vue-particles": "^1.0.9",
"vue-template-compiler": "2.6.12",
"vue-wxlogin": "^1.0.4"
},
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { codeInspectorPlugin } = require('code-inspector-plugin');
//发布线上版本时,需要开启对js和css文件进行gzip压缩打包,nginx部署注意配置gzip参数
const CompressionWebpackPlugin = require('compression-webpack-plugin');
let cesiumSource = "./node_modules/cesium/Source";
let cesiumWorkers = "../Build/Cesium/Workers";
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title// 标题
const port = process.env.port || process.env.npm_config_port || 80 // 端口
console.log('DESC-------' + process.env.DESC)
console.log('VUE_APP_PROJECT_TYPE-------' + process.env.VUE_APP_PROJECT_TYPE)
let url = http://localhost:8080
if (process.env.VUE_APP_PROJECT_TYPE == 'pxks') {
url = '11.11.11.11'
}
console.log("url:" + url)
console.log('process.env.VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
console.log('process.env.NODE_ENV', process.env.NODE_ENV)
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分,具体配置参考文档
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.ttk.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ttk.vip/admin/,则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",//北滘镇前端使用
// 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
outputDir: 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
assetsDir: 'static',
// y,有效值:ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: port,
open: true,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: url,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
'/fsGovPlatform': {
target: 'http://22.22.22.22:8080/fsGovPlatform',
ws: true,
changOrigin: true,
pathRewrite: {
'^/fsGovPlatform': ''
}
},
},
disableHostCheck: true
},
configureWebpack: {
name: name,
// cesium
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
cesium: path.resolve(__dirname, cesiumSource)
}
},
devtool: 'source-map',
amd: {
// cesium
toUrlUndefined: true
},
module: {
// cesium 不加这个配置会报require引入警告
unknownContextCritical: false
},
plugins: [
new CompressionWebpackPlugin({
test: /\.(js|css|html|json)?$/i, // 压缩文件格式
filename: '[path][base].gz', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
compressionOptions: { level: 9 }, //压缩等级,1-9数字越大压力率越高,文件越小默认值9
// threshold: 10240, // 只有大小大于该值的资源会被处理,单位是 bytes,默认值是 0。
minRatio: 0.8, // 压缩率小于1才会压缩
deleteOriginalAssets: false // 是否删除原资源,本项目始终不能删除
}),
new codeInspectorPlugin({
bundler: 'webpack',
editor: 'code',
}),
// cesium
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify("../../")
}), // 对build生效,拷贝到dist目录下。如:dist/Assets
new CopyWebpackPlugin([
{
from: path.join(cesiumSource, cesiumWorkers),
to: "Workers"
}
]),
new CopyWebpackPlugin([
{
from: path.join(cesiumSource, "Assets"),
to: "Assets"
}
]),
new CopyWebpackPlugin([
{
from: path.join(cesiumSource, "Widgets"),
to: "Widgets"
}
]),
new CopyWebpackPlugin([
{
from: path.join(cesiumSource, 'ThirdParty/Workers'),
to: 'ThirdParty/Workers'
}
]),
],
},
css: {
requireModuleExtension: true,
sourceMap: true,
// 全局样式
loaderOptions: {
postcss: {
plugins: [
require('postcss-px-to-viewport')({
unitToConvert: 'px', // 需要转换的单位,默认为"px"
viewportWidth: 1920, // 视窗的宽度,对应pc设计稿的宽度,一般是1920
viewportHeight: 1080, // 视窗的高度,对应的是我们设计稿的高度,我做的是大屏监控,高度就是1080
unitPrecision: 6, // 单位转换后保留的精度
propList: [
// 能转化为vw的属性列表
'*',
// '!font-size',
],
viewportUnit: 'vw', // 希望使用的视口单位
fontViewportUnit: 'vw', // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值,而不添加备用属性
exclude: defaultSettings.pxToViewPortExclude, // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
}),
],
},
}
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
// config.optimization.runtimeChunk('single'),
// {
// from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
// to: './', //到根目录下
// }
}
)
}
}
还未成功