vue-cli3的vue.config.js文件配置,生成dist文件
- //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.config.js文件配置,生成dist文件的更多相关文章
- vue 调用常量的config.js文件
我遇到问题,就是有很多常量需要应用的项目里面.所以需要打算设置一个config.js文件 1.填写config.js 文件 //常量配置 //快递公司名单 对应的页面为: src/pages/othe ...
- bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢?
bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢? 如果用sublime的话如何实现代码保存后浏览器刷新成最新的代码样式? 或者有什么其他好用的工具? 从网上找了很多方法 ...
- 利用svn的补丁文件打包生成增量文件
下面的代码是maven版本 1. 创建patch.txt增量文件 保存到 文件目录下 比如 E:\aa\patch.txt 2. 编写java代码 package utils; import java ...
- 使用Microsoft.Office.Interop.Excel.dll 文件来生成excel 文件
日常工作中经常需要将后台的数据导出成excel 格式,这里通过调用微软提供的类库来生成excel 文件. 具体是引用 了Microsoft.Office.Interop.Excel.dll 类库文件 ...
- 文件参数化-utp框架之根据yaml文件自动生成python文件+utp运行用例
根据yaml文件自动生成python文件 utp框架: bin目录:存放执行文件(run.py) cases目录:存放生成的用例的python文件(该目录下的文件为根据data目录下的测试用例生成的p ...
- vue.config.js常用配置
使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建 ...
- vue.config.js基础配置
const path = require('path') const UglifyPlugin = require('uglifyjs-webpack-plugin') module.exports ...
- 配置vue项目的自定义config.js
[1]不采用脚手架的config文件夹中的配置文件 [2]在static文件夹下,自定义一个congfig.js文件 // 配置开发环境下服务器地址 window.Glod = { pmsApiUrl ...
- vue cli3超详细创建多页面配置
1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...
随机推荐
- Qt 4.5发布(最大的变动是换用LGPL许可证,移植进了苹果的Cocoa框架。之前的Qt只支持Carbon框架,现在的Qt 4.5两者都支持。单一源代码创建出支持32位或64位字节的Intel或PowerPC Mac二进制文件)
Nokia的开源Qt开发工具正式发布了4.5版.如前所述,Qt 4.5最大的变动是换用LGPL许可证,目前采用的三个许可证分别为LGPL/GPL和商业许可证. 新版 ...
- Linux Permission denied 问题
Linux Permission denied 问题 来源 https://www.cnblogs.com/sparkdev/p/10287164.html 如果当前用户没有某个文件的写权限,又要通 ...
- mysql if else count 计数
select mobile,avg(total),sum(click_day*click_money),sum(click_day),count(push_status),sum(clicks),co ...
- 【Git的基本操作七】创建远程库、在本地创建远程库别名
1. 创建远程库
- vue2中的keep-alive使用总结及注意事项
问题总结;最近在写vue移动端的项目的时候,当我切换菜单,再切换换回去的时候,发现页面出现闪动的效果,其原因是因为切换回去之后,页面重新渲染了;为了解决这一问题:查阅资料,只需要在 入口文件 App. ...
- BAT面试笔试33题:JavaList、Java Map等经典面试题!答案汇总!
JavaList面试题汇总 1.List集合:ArrayList.LinkedList.Vector等. 2.Vector是List接口下线程安全的集合. 3.List是有序的. 4.ArrayLis ...
- vue 日常开发小细节
1. element-ui 日期选区禁用,设置属性 disabledDate: (time) => { const curDate = (new Date()).getTime() const ...
- C#中UDP(Socket)
1 使用无连接的套接字,我们能够在自我包含的数据包里发送消息,采用独立的读函数读取消息,读取的消息是使用独立的发送函数发送的.但是UDP数据包不能保证可靠传输,存在许多的因素,比如网络繁忙等等,都有可 ...
- C#中构建多线程应用程序[转] ----代码示例
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- C语言求π的方法
#include <stdio.h> #include <math.h> int main() { int r; double PI,s; scanf("%d&quo ...