1. //vue.config.json
    const path = require('path');
  2. // const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 (另:https://github.com/liriliri/eruda)
  3. // const CompressionPlugin = require('compression-webpack-plugin'); //Gzip
  4. // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器
  5. const publicPath = process.env.NODE_ENV === "production" ? "/static/" : "/"; //font scss资源路径 不同环境切换控制
  6.  
  7. const webpack = require('webpack');
  8. // vue.config.js
  9. module.exports = {
  10. //基本路径
  11. publicPath: './',
  12. //输出文件目录
  13. outputDir: 'dist',
  14. //是否在保存的时候检查
  15. lintOnSave: true,
  16. //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  17. assetsDir: 'static',
  18. //以多页模式构建应用程序。
  19. pages: undefined,
  20. //是否使用包含运行时编译器的 Vue 构建版本
  21. runtimeCompiler: false,
  22. //生产环境是否生成 sourceMap 文件,一般情况不建议打开
  23. productionSourceMap: false,
  24. //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建,在适当的时候开启几个子进程去并发的执行压缩
  25. parallel: require('os').cpus().length > 1,
  26. // webpack配置
  27. //对内部的 webpack 配置进行更细粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  28. chainWebpack: config => {
  29. /**
  30. * 删除懒加载模块的prefetch,降低带宽压力
  31. * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
  32. * 而且预渲染时生成的prefetch标签是modern版本的,低版本浏览器是不需要的
  33. */
  34. //config.plugins.delete('prefetch');
  35. //if(process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
  36. //} else {// 为开发环境修改配置...
  37. //}
  38. },
  39. //调整 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
  40. configureWebpack: config => {
  41. //生产and测试环境
  42. let pluginsPro = [
  43. // new CompressionPlugin({ //文件开启Gzip,也可以通过服务端(如:nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
  44. // filename: '[path].gz[query]',
  45. // algorithm: 'gzip',
  46. // test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$', ),
  47. // threshold: 8192,
  48. // minRatio: 0.8,
  49. // }),
  50. // Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)
  51. // new BundleAnalyzerPlugin(),
  52. ];
  53. //开发环境
  54. let pluginsDev = [
  55. //移动端模拟开发者工具(https://github.com/diamont1001/vconsole-webpack-plugin https://github.com/Tencent/vConsole)
  56. // new vConsolePlugin({
  57. // filter: [], // 需要过滤的入口文件
  58. // enable: true // 发布代码前记得改回 false
  59. // }),
  60. new webpack.ProvidePlugin({//引入jquery
  61. $:"jquery",
  62. jQuery:"jquery",
  63. "windows.jQuery":"jquery"
  64. })
  65. ];
  66. if(process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
  67. config.plugins = [...config.plugins, ...pluginsPro];
  68. } else {
  69. // 为开发环境修改配置...
  70. config.plugins = [...config.plugins, ...pluginsDev];
  71. }
  72. },
  73. css: {
  74. // 启用 CSS modules
  75. modules: false,
  76. // 是否使用css分离插件
  77. extract: true,
  78. // 开启 CSS source maps,一般不建议开启
  79. sourceMap: false,
  80. // // css预设器配置项
  81. // loaderOptions: {
  82. // sass: {
  83. // //设置css中引用文件的路径,引入通用使用的scss文件(如包含的@mixin)
  84. // data: `
  85. // $baseUrl: "/";
  86. // @import '@/assets/scss/_common.scss';
  87. // `
  88. // //data: `
  89. // //$baseUrl: "/";
  90. // //`
  91. // }
  92. // }
  93. },
  94. // 选项...
  95. devServer: {
  96. // host: 'localhost',
  97. // host: "0.0.0.0",
  98. // https: false, // https:{type:Boolean}
  99. // open: true, //配置自动启动浏览器 http://172.16.1.12:7071/rest/mcdPhoneBar/
  100. // hotOnly: true, // 热更新
  101. port: 8089,
  102. // proxy:{
  103. // '/': {
  104. // target: 'http://192.168.0.125:3000/',
  105. // changeOrigin: true,
  106. // pathRewrite: {}
  107. // },
  108. // "/rest/*": {
  109. // target: "http://172.16.1.12:7071",
  110. // changeOrigin: true,
  111. // // ws: true,//websocket支持
  112. // secure: false
  113. // },
  114. // "/pbsevice/*": {
  115. // target: "http://172.16.1.12:2018",
  116. // changeOrigin: true,
  117. // //ws: true,//websocket支持
  118. // secure: false
  119. // },
  120. // }
  121.  
  122. // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
  123. // pluginOptions: {
  124. // 'style-resources-loader': {//https://github.com/yenshih/style-resources-loader
  125. // preProcessor: 'scss',//声明类型
  126. // 'patterns': [
  127. // //path.resolve(__dirname, './src/assets/scss/_common.scss'),
  128. // ],
  129. // //injector: 'append'
  130. // }
  131. // }
  132.  
  133. },
  134.  
  135. // configureWebpack: {//引入jquery
  136. // plugins: [
  137. // new webpack.ProvidePlugin({
  138. // $:"jquery",
  139. // jQuery:"jquery",
  140. // "windows.jQuery":"jquery"
  141. // })
  142. // ]
  143. // },
  144.  
  145. }

package.json文件配置

  1. {
  2. "name": "test",
  3. "version": "0.1.0",
  4. "private": true,
  5. "scripts": {
  6. "serve": "vue-cli-service --open --mode development serve",
  7. "build": "vue-cli-service build",
  8. "lint": "vue-cli-service lint"
  9. },
  10. "dependencies": {
  11. "axios": "^0.18.0",
  12. "core-js": "^2.6.5",
  13. "jquery": "^3.4.1",
  14. "popper.js": "^1.15.0",
  15. "vue": "^2.6.10",
  16. "vue-awesome-swiper": "^3.1.3",
  17. "vue-router": "^3.0.3",
  18. "vuex": "^3.0.1"
  19. },
  20. "devDependencies": {
  21. "@vue/cli-plugin-babel": "^3.6.0",
  22. "@vue/cli-plugin-eslint": "^3.6.0",
  23. "@vue/cli-service": "^3.6.0",
  24. "@vue/eslint-config-prettier": "^4.0.1",
  25. "babel-eslint": "^10.0.1",
  26. "bootstrap": "^4.3.1",
  27. "eslint": "^5.16.0",
  28. "eslint-plugin-vue": "^5.0.0",
  29. "less": "^3.9.0",
  30. "less-loader": "^4.1.0",
  31. "vue-scroller": "^2.2.4",
  32. "vue-template-compiler": "^2.5.21"
  33. }
  34. }

原文链接

配置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. 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和商业许可证.           新版 ...

  2. Linux Permission denied 问题

    Linux Permission denied 问题 来源  https://www.cnblogs.com/sparkdev/p/10287164.html 如果当前用户没有某个文件的写权限,又要通 ...

  3. mysql if else count 计数

    select mobile,avg(total),sum(click_day*click_money),sum(click_day),count(push_status),sum(clicks),co ...

  4. 【Git的基本操作七】创建远程库、在本地创建远程库别名

    1. 创建远程库

  5. vue2中的keep-alive使用总结及注意事项

    问题总结;最近在写vue移动端的项目的时候,当我切换菜单,再切换换回去的时候,发现页面出现闪动的效果,其原因是因为切换回去之后,页面重新渲染了;为了解决这一问题:查阅资料,只需要在 入口文件 App. ...

  6. BAT面试笔试33题:JavaList、Java Map等经典面试题!答案汇总!

    JavaList面试题汇总 1.List集合:ArrayList.LinkedList.Vector等. 2.Vector是List接口下线程安全的集合. 3.List是有序的. 4.ArrayLis ...

  7. vue 日常开发小细节

    1. element-ui 日期选区禁用,设置属性 disabledDate: (time) => { const curDate = (new Date()).getTime() const ...

  8. C#中UDP(Socket)

    1 使用无连接的套接字,我们能够在自我包含的数据包里发送消息,采用独立的读函数读取消息,读取的消息是使用独立的发送函数发送的.但是UDP数据包不能保证可靠传输,存在许多的因素,比如网络繁忙等等,都有可 ...

  9. C#中构建多线程应用程序[转] ----代码示例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. C语言求π的方法

    #include <stdio.h> #include <math.h> int main() { int r; double PI,s; scanf("%d&quo ...