内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

nuxtjs+vue项目如何配置nuxt.config.js里webpack4的参数?

发布:2020-11-24 浏览: 评论(
使用nuxtjs(2.14.7)+vue2.0来做项目时,项目上线之前需要使用webpack(这里说的都是4.0版以上的)构建(nuxt build)生成文件,测试没问题之后才可以上线(nuxt start),

不用webpack不知道,一接触webpack才知道webpack的强大且繁杂,连续看了好几遍,翻来翻去看了webpack的api配置文档,真的是头大,参数实在太多了,加上各种plugins插件的配置,看了很多遍依然不知道有些参数是干嘛的,必须自己去使用才知道是怎么回事,可能关于文件处理的知识基本是后端用得多,所以前端接触起来开始是有点晕的;

所以我干脆不怎么看webpack的文档了,直接看nuxtjs文档,nuxtjs参数里已经有很多对应webpack配置的选项,基本全在参数build里可以找到,问题是总有些webpack配置是nuxtjs没有的,所以我是既想保留nuxtjs里关于webpack的默认优化设置,又想可以自己另外可以配置webpack的更多参数,合并相同项,但不会覆盖nuxtjs的默认选项,这样才是最优配置吧,nuxtjs和webpack真正分家,所以nuxtjs的build参数里保留了extend参数,目的就是让你另外配置更多webpack参数的,下面直接看小编是怎么做的,nuxt.config.js文件代码献上:

import webpack from 'webpack'
const jsdom = require('jsdom');
const {JSDOM} = jsdom;
const {document} = (new JSDOM('<!doctype html><html><body></body></html>')).window;
global.document = document;
const window = document.defaultView;
const $ = require('jquery')(window);//nuxt.config.js要使用jquery只能这样引用,只在本页面用

export default{
  /*
  ** Nuxt rendering mode
  ** See https://nuxtjs.org/api/configuration-mode
  */
  mode: 'universal',
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  target: 'server',
  /*
  ** Headers of the page
  ** See https://nuxtjs.org/api/configuration-head
  */
  head: {
    title: '助梦OA系统' || process.env.npm_package_name ,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css',
    '@/assets/css/index.css'
  ],
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [
    '@/plugins/index',
    '@/plugins/element-ui',
    '@/plugins/common',
    '@/plugins/verify'
  ],
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  components: true,
  /*
  ** Nuxt.js modules
  */
  modules: [
  '@nuxtjs/axios',
  '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      target: 'http://localhost',
      pathRewrite: {
        '^/api' : '/'
      }
    }
  },
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  buildDir:'.nuxt',
  build: {
    transpile: [/^element-ui/,/^axois/],//需要babel转化的引用 
    publicPath:'/public/',
    plugins: [
      new webpack.ProvidePlugin({
        '$':'jquery' //jquery在.vue文件使用要这样配置
      })
    ],
    devtools:false,
    extractCSS:true,
    optimizeCSS:true,
    terser:{
	parallel: true,
	cache: false,
	sourceMap: false,
	terserOptions: {
		compress:{
		        drop_console:true //生产环境删除所有console
		},
		sourceMap:false
	}
    },
    html:{
		minify:{
			minifyCSS:true,
  			minifyJS:true,
  			minifyURLs:true
		}
    },
    extend(config,nuxtBuildConfig){
		//去server/webpack.config.js配置更多webpack的配置
		if(!(nuxtBuildConfig.isDev)){
			const webpackConfig = require('./server/webpack.config.js');
			$.extend(true, config, webpackConfig||{});//这里这么写config = $.extend(true, {}, config, webpackConfig||{})是错误的,webpackConfig不生效,思考下有什么不同?
		}
    }
  },
  generate:{
  	dir:"dist"
  },
  dev:process.env.NODE_ENV !== 'production',
  router:{
  	base:'/'
  },
  server:{
  	host:'0.0.0.0',
  	port:3002
  }
}

又用回jQuery似乎不太好,你们是不是也这么想的,实际上小编开始也这么想,我们用vue肯定是要抛弃dom操作的,不要再回到拿jQuery来操作dom的时代,但是jQuery用来处理数据的那部分强大的api我们是抛弃不了,比如上面的$.extend()对象深度(deep)合并方法,难道我们要再去写一遍吗?那真是不可想象的,虽然我们 不再用jQuery操作dom来写代码了,但是jQuery拿来处理数据还是很方便的;当然,你想全部方法都自己实现也没人反对的;

我们回到webpack的话题,我看到有很多使用nuxtjs的同学很喜欢在package.json里面进行引用webpack.config.js文件的,如下:

{
  "name": "dreamOA",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "webpack --mode='development' --config server/webpack.config.js",
    "//dev": "nuxt",
    "//build": "nuxt build",
    "build": "webpack --mode='production'  --config server/webpack.config.js",
    "start": "webpack --mode='production'  --config server/webpack.config.js",
    "//start": "nuxt start",
    "generate": "nuxt generate"
  },

其实小编想说,这样的写法一般用在纯vue框架项目的vue.config.js比较好,但是用在nuxtjs+vue项目上面,这样等于去掉了nuxtjs很多便捷的操作以及一些比较好的优化处理,关键这样写在webpack.config.js又要重写nuxt的dev和build处理命令,感觉不太好; 当然,这样用也是没有任何问题的,自己设置好就行了,下面是webpack.config.js的内容:

const { Nuxt, Builder } = require('nuxt');
const path = require('path');
const app = require('express')();

module.exports = {
	devtool:false,
       ......
       ......
}
前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2021 seozhijia.net 版权所有-粤ICP备13087626号-4