//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"
}
}
原文链接