此配置基于 Nuxt2.x 版本
const TerserPlugin = require('terser-webpack-plugin'); module.exports = { mode: 'universal', /* ** Headers of the page */ head: { htmlAttrs: { // 自定义HTML模板时使用的 HTML_ATTRS HTML_ATTRS lang: 'zh-CN', amp: true }, title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'keywords', content: 'keywords1,keywords2,keywords3' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], // 以link的方式使用外部资源文件 link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'stylesheet', href: 'https://xxxxxx' } ], // 使用外部资源文件,自动生成 script 标签 script: [ { src: 'https://xxxxxx' } ] }, /* ** Customize the progress-bar color */ loading: { color: '#f47e36' }, // 进行ajax请求时顶部进度条的颜色 /* ** Global CSS */ css: [ // 全局样式导入 '@/assets/style/index.scss', 'element-ui/lib/theme-chalk/index.css', { src: 'swiper/dist/css/swiper.css' } ], /* ** Plugins to load before mounting the App */ plugins: [ // 加载 plugins '@/plugins/element-ui', { src: '@/plugins/axios', mode: 'client' }, { src: '@/plugins/components', mode: 'client' }, { src: '@/plugins/vue-swiper', mode: 'client' }, { src: '@/plugins/babel-polyfill', mode: 'client' } ], /* ** Nuxt.js dev-modules */ devModules: [ // Doc: https://github.com/nuxt-community/eslint-module '@nuxtjs/eslint-module' ], /* ** Nuxt.js modules */ modules: [ // nuxt 模块扩展 // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', // npm install @nuxtjs/proxy 用于nuxt解决跨域。 '@nuxtjs/proxy', // npm i -D @nuxtjs/style-resources sass-loader node-sass '@nuxtjs/style-resources' ], styleResources: { // style 预处理器配置 scss: [ // 此处用的预处理器是scss 加载css资源,一般用于加载全局变量之类 '~assets/style/variables.scss', '~assets/style/amination.scss' ] }, router: { // 全局路由配置 middleware: ['auth'] // 添加路由中间件 }, /* ** Axios module configuration ** See https://axios.nuxtjs.org/options */ axios: { proxy: true, prefix: '/api/', credentials: true // See https://github.com/nuxt-community/axios-module#options }, proxy: { '/api/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:9091' : 'https://www.xxx.com', pathRewrite: { '^/api/': '/', changeOrigin: true } } }, /* ** Build configuration */ build: { // 提取css到单独link文件 extractCSS: true, transpile: [/^element-ui/], /* ** You can extend webpack config here */ extend (config, ctx) { // Run ESLint on save if (ctx.dev && ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }); } }, optimization: { // 配置代码压缩规则 minimizer: [ // webpack4 使用的压缩插件,用来替代webpack3的 UglifyJsPlugin new TerserPlugin({ terserOptions: { warnings: false, compress: { drop_console: true, // 可选:false,生产移除 console.log pure_funcs: ['console.log'] }, output: { // 是否保留代码注释 comments: false }, cache: true, parallel: true, // Must be set to true if using source-maps in production sourceMap: process.env.NODE_ENV !== 'production' } }) ], splitChunks: { // 代码打包分割规则 chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, elementUI: { name: 'chunk-ui', priority: 20, test: /[\\/]node_modules[\\/]_?element-ui(.*)/ } } } }, babel: { // babel相关配置 'plugins': [ // element-ui 按需加载 [ 'component', { 'libraryName': 'element-ui', 'styleLibraryName': 'theme-chalk' } ] ], 'comments': true }, publicPath: '/static/', // 配置打包的静态资源文件目录。可以是cdn地址 filenames: { // 打包的文件名规则 app: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js', chunk: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js', css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css', img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[hash:7].[ext]', font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[hash:7].[ext]', video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[hash:7].[ext]' } } };
除特别注明外,本站所有文章均为原创,转载请注明原文链接:https://www.myblogbo.com/article/25.html