vue-cli3的vue.config.js文件配置,生成dist文件
2023-09-11 14:19:39 时间
//vue.config.json
const path = require('path');
// const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 (另:https://github.com/liriliri/eruda)
// const CompressionPlugin = require('compression-webpack-plugin'); //Gzip
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器
const publicPath = process.env.NODE_ENV === "production" ? "/static/" : "/"; //font scss资源路径 不同环境切换控制
const webpack = require('webpack');
// vue.config.js
module.exports = {
//基本路径
publicPath: './',
//输出文件目录
outputDir: 'dist',
//是否在保存的时候检查
lintOnSave: true,
//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: 'static',
//以多页模式构建应用程序。
pages: undefined,
//是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
//生产环境是否生成 sourceMap 文件,一般情况不建议打开
productionSourceMap: false,
//是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建,在适当的时候开启几个子进程去并发的执行压缩
parallel: require('os').cpus().length > 1,
// webpack配置
//对内部的 webpack 配置进行更细粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: config => {
/**
* 删除懒加载模块的prefetch,降低带宽压力
* https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
* 而且预渲染时生成的prefetch标签是modern版本的,低版本浏览器是不需要的
*/
//config.plugins.delete('prefetch');
//if(process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
//} else {// 为开发环境修改配置...
//}
},
//调整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
configureWebpack: config => {
//生产and测试环境
let pluginsPro = [
// new CompressionPlugin({ //文件开启Gzip,也可以通过服务端(如:nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
// filename: '[path].gz[query]',
// algorithm: 'gzip',
// test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$', ),
// threshold: 8192,
// minRatio: 0.8,
// }),
// Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)
// new BundleAnalyzerPlugin(),
];
//开发环境
let pluginsDev = [
//移动端模拟开发者工具(https://github.com/diamont1001/vconsole-webpack-plugin https://github.com/Tencent/vConsole)
// new vConsolePlugin({
// filter: [], // 需要过滤的入口文件
// enable: true // 发布代码前记得改回 false
// }),
new webpack.ProvidePlugin({//引入jquery
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
];
if(process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
config.plugins = [...config.plugins, ...pluginsPro];
} else {
// 为开发环境修改配置...
config.plugins = [...config.plugins, ...pluginsDev];
}
},
css: {
// 启用 CSS modules
modules: false,
// 是否使用css分离插件
extract: true,
// 开启 CSS source maps,一般不建议开启
sourceMap: false,
// // css预设器配置项
// loaderOptions: {
// sass: {
// //设置css中引用文件的路径,引入通用使用的scss文件(如包含的@mixin)
// data: `
// $baseUrl: "/";
// @import '@/assets/scss/_common.scss';
// `
// //data: `
// //$baseUrl: "/";
// //`
// }
// }
},
// 选项...
devServer: {
// host: 'localhost',
// host: "0.0.0.0",
// https: false, // https:{type:Boolean}
// open: true, //配置自动启动浏览器 http://172.16.1.12:7071/rest/mcdPhoneBar/
// hotOnly: true, // 热更新
port: 8089,
// proxy:{
// '/': {
// target: 'http://192.168.0.125:3000/',
// changeOrigin: true,
// pathRewrite: {}
// },
// "/rest/*": {
// target: "http://172.16.1.12:7071",
// changeOrigin: true,
// // ws: true,//websocket支持
// secure: false
// },
// "/pbsevice/*": {
// target: "http://172.16.1.12:2018",
// changeOrigin: true,
// //ws: true,//websocket支持
// secure: false
// },
// }
// 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
// pluginOptions: {
// 'style-resources-loader': {//https://github.com/yenshih/style-resources-loader
// preProcessor: 'scss',//声明类型
// 'patterns': [
// //path.resolve(__dirname, './src/assets/scss/_common.scss'),
// ],
// //injector: 'append'
// }
// }
},
// configureWebpack: {//引入jquery
// plugins: [
// new webpack.ProvidePlugin({
// $:"jquery",
// jQuery:"jquery",
// "windows.jQuery":"jquery"
// })
// ]
// },
}
package.json文件配置
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service --open --mode development serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"core-js": "^2.6.5",
"jquery": "^3.4.1",
"popper.js": "^1.15.0",
"vue": "^2.6.10",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.6.0",
"@vue/cli-plugin-eslint": "^3.6.0",
"@vue/cli-service": "^3.6.0",
"@vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.1",
"bootstrap": "^4.3.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"vue-scroller": "^2.2.4",
"vue-template-compiler": "^2.5.21"
}
}
原文链接
相关文章
- Vue笔记:vue-router
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- 如何用vue打造一个移动端音乐播放器
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
- JS框架_(Vue.js)带有星期日期的数字时钟
- vue-cli 3.0 index.html引入第三方js文件
- This dependency was not found: * !!vue-style-loader!css-loader?……解决方案
- [Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS
- vue.js3:用el-checkbox做复选框(vue@3.2.37 / element-plus@2.2.2)
- vue.js3: 用crypto-js做sha加密(vue@3.2.37 / crypto-js@4.1.1)
- thinkphp6: 使用前后端分离的验证码(thinkphp 6.0.9/php 8.0.14/vue 3.2.26)
- vue.js 3.2.22:用@vueuse/core实现图片懒加载(@vueuse/core@7.0.3)
- 部署vue.js3.x项目到线上(vue.js 3.2.6/nginx 1.18.0)
- 从vue-cli2.x升级到@vue/cli 4.x(node v14.15.0 / vue.js 3.0)
- 从安装node js到构建一个vue并启动它
- vue 自定义指令input表单的数据验证
- [Vue] Lazy Load a Route by using the Dynamic Import in Vue.js
- vue.js3: i18n根据浏览器语言自动选择当前语言(vue@3.2.37 / vue-i18n@9.2.0-beta.36)
- 如何在 Vue 3 中使用<script lang=“ts“ setup>语法糖
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue项目报错:migrating.js?2bb5:56 [Element Migrating][ElInput][Event]: click is removed.
- 在vue里面使用ElementUI的具体步骤
- 关于购物车添加按钮的动画(vue.js)
- vue - chunk-vendors.js文件太大,实现拆分打包的具体配置
- win10 安装vue 详解-包括node.js、npm、webpack
- vue如何加入百度联盟广告
- Vue.js 2.0 学习重点记录
- 169:vue+openlayers 根据多边形坐标,获取面积值
- 071:vue+openlayers轨迹路线动画(示例代码)