//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-cli3

vue-cli3的vue.config.js文件配置,生成dist文件的更多相关文章

  1. vue 调用常量的config.js文件

    我遇到问题,就是有很多常量需要应用的项目里面.所以需要打算设置一个config.js文件 1.填写config.js 文件 //常量配置 //快递公司名单 对应的页面为: src/pages/othe ...

  2. bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢?

    bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢? 如果用sublime的话如何实现代码保存后浏览器刷新成最新的代码样式? 或者有什么其他好用的工具? 从网上找了很多方法 ...

  3. 利用svn的补丁文件打包生成增量文件

    下面的代码是maven版本 1. 创建patch.txt增量文件 保存到 文件目录下 比如 E:\aa\patch.txt 2. 编写java代码 package utils; import java ...

  4. 使用Microsoft.Office.Interop.Excel.dll 文件来生成excel 文件

    日常工作中经常需要将后台的数据导出成excel  格式,这里通过调用微软提供的类库来生成excel 文件. 具体是引用 了Microsoft.Office.Interop.Excel.dll 类库文件 ...

  5. 文件参数化-utp框架之根据yaml文件自动生成python文件+utp运行用例

    根据yaml文件自动生成python文件 utp框架: bin目录:存放执行文件(run.py) cases目录:存放生成的用例的python文件(该目录下的文件为根据data目录下的测试用例生成的p ...

  6. vue.config.js常用配置

    使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建 ...

  7. vue.config.js基础配置

    const path = require('path') const UglifyPlugin = require('uglifyjs-webpack-plugin') module.exports ...

  8. 配置vue项目的自定义config.js

    [1]不采用脚手架的config文件夹中的配置文件 [2]在static文件夹下,自定义一个congfig.js文件 // 配置开发环境下服务器地址 window.Glod = { pmsApiUrl ...

  9. vue cli3超详细创建多页面配置

    1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...

随机推荐

  1. Eclipse怎么升级版本

    java工程上右键——选择Properties——Project Faces——右边java项选择相应的版本就OK了

  2. Fix Scheduled Task Won’t Run for .BAT File

    Step 1: Check File/Folder Permissions The first step to fixing this issue is ensuring that the accou ...

  3. 文件名后面加(1).text

    ; //在重复名称后加(序号) while (File.Exists(path)) { if (path.Contains(").")) { int start = path.La ...

  4. 【ExtJs】ext前台中的日期控件传输时间到后台的转换保存过程

    //前台日期选择框 {fieldLabel:, padding: ',afterLabelTextTpl: required,allowBlank: false,format: 'Y-m-d H:i: ...

  5. 在webstorm中编译less,以及压缩css

    一.编译   在全局安装less npm install -g less 在webstorm setting ->tools -> filewatcher中设置 :  ../css/$Fi ...

  6. Java基础——2 操作符

  7. 第十五章·Kibana深入-Dev Tools及Lucene语法

    Dev Tools介绍 Dev Tools 页面包含开发工具,您可以使用这些Dev Tools与Kibana中的数据进行交互. 原先的交互式控制台Sense,使用户方便的通过浏览器直接与Elastic ...

  8. 无聊开始玩路由器,入门Tomato固件

    无聊开始玩路由器,入门Tomato固件 在Wordpress上消失了一段时间,其实我最近几个月都比较宅.相信最近大家都了解过新出的一款很NB的路由器叫极路由,功能很强大,8G的可存储空间,可以安装路由 ...

  9. resultMap自定义映射---8.3.1. 解决列名(表中的字段名称)和实体类中的属性名不一致

    1.1.1.1.      步骤一:将驼峰匹配注释掉 --------------测试完成后仍然 回来开启  其他地方可能用到 一旦注释掉驼峰匹配,那么再通过queryUserById查询的结果中,用 ...

  10. three.js之让物体动起来方式(一)移动摄像机

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...