首页 新闻 会员 周边

vue ssr 在main.js中引用 .css 无法正常打包?

0
悬赏园豆:30 [待解决问题]

错误情景

  • 不使用nuxt.js的情况下,vue 手动搭建服务器端(node)渲染(ssr)引用element-ui的.css文件时报错?

我的环境

  • node v10.13.0
  • npm v6.9.0
  • vue-cli v2.9.6
  • Windows 10(第一次测试未在linux'服务器上进行)

相关代码

14、// 在main.js中引入element
15、import ElementUI from 'element-ui'
16、import 'element-ui/lib/theme-chalk/index.css'
17、Vue.use(ElementUI);

报错信息如下

......vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.el-header{padding:0 20px;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}.el-aside,.el-main{o
verflow:auto;-webkit-box-sizing:border-box}.el-aside{box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}.el-main{display:block;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-
size:auto;flex-basis:auto;box-sizing:border-box;padding:20px}.el-footer{padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}
 @ ./src/main.js 16:0-46
 @ ./src/entry-server.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! facilities@1.0.0 build:server: `cross-env NODE_ENV=production webpack --config build/webpack.server.conf.js --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the facilities@1.0.0 build:server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

其中错误提示./src/main.js 16:0-46的代码如下

import 'element-ui/lib/theme-chalk/index.css'

当我注释掉此行的时候就可以正常打包了,由此判断是 这种.css的引入方式在node端并不支持,

求助

  • 本人是后端开发,对前端还不是太熟悉,希望可以得到各位大佬的指点如何正确的引入.css文件,或者通过其他方式正常引入elementUI
  • 如承蒙各位指点,在下唯有感激涕零,不胜感激~!
  • 另附一份webpack.base.conf.js
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}


var webpack=require('webpack');
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/entry-client.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
//  plugins: [ 
//            new webpack.ProvidePlugin({ 
//                  $:"jquery", 
//                  jQuery:"jquery", 
//                 WebVideoCtrl:"WebVideoCtrl"
//         }) 
//  ],
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
      // 'jquery':resolve('static/jquery-1.7.1.min.js'),
      // 'WebVideoCtrl':resolve('static/webVideoCtrl.js')
    }
  },
  
  module: {
    rules: [
      
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 90000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 90000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 90000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.less/,
          loader: 'style-loader!css-loader!less-loader'
        }
    ]
  },
  devServer: {
    disableHostCheck: true,
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}
问题补充:
  • webpack.server.conf.js文件如下
const webpack = require('webpack')
const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.conf.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
// 去除打包css的配置,如果初始化时使用了ESLint代码检查,将rules[0]改为rules[1]
baseConfig.module.rules[0].options = ''

module.exports = merge(baseConfig, {
    // 将 entry 指向应用程序的 server entry 文件
    entry: './src/entry-server.js',
    // 这允许 webpack 以 Node 适用方式(Node-appropriate fashion)处理动态导入(dynamic import),
    // 并且还会在编译 Vue 组件时,
    // 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
    target: 'node',
    // 对 bundle renderer 提供 source map 支持
    devtool: 'source-map',
    // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
    output: {
        libraryTarget: 'commonjs2'
    },
    // https://webpack.js.org/configuration/externals/#function
    // https://github.com/liady/webpack-node-externals
    // 外置化应用程序依赖模块。可以使服务器构建速度更快,
    // 并生成较小的 bundle 文件。
    externals: nodeExternals({
        // 不要外置化 webpack 需要处理的依赖模块。
        // 你可以在这里添加更多的文件类型。例如,未处理 *.vue 原始文件,
        // 你还应该将修改 `global`(例如 polyfill)的依赖模块列入白名单
        whitelist: /\.css$/
    }),
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
            'process.env.VUE_ENV': '"server"'
        }),
        // 这是将服务器的整个输出
        // 构建为单个 JSON 文件的插件。
        // 默认文件名为 `vue-ssr-server-bundle.json`
        new VueSSRServerPlugin()
    ]
})
_Eternity味道的主页 _Eternity味道 | 初学一级 | 园豆:60
提问于:2019-05-21 14:05

你的项目里有这个文件吗 webpack.server.conf.js 有的话发出来瞅瞅

默卿 4年前

@默卿: 发了, baseConfig.module.rules[0].options = ''
这行不懂是干嘛的,有关系吗

Eternity味道 4年前

@Eternity味道: 这行和打包css有关系,你把rules里面的0改成1试试呢

默卿 4年前

@默卿: 改成0 和 改成1 ,打包结果一样都是报上文中的elment相关的错误,仅打包客户端没问题,打包服务端的问题。

Eternity味道 4年前
< >
分享
所有回答(2)
0

你打包的入口文件名不对吧。改成app:”./src/main.js”应该就行了吧

jeromeNie | 园豆:202 (菜鸟二级) | 2019-05-22 12:05
  • vue的服务端渲染即SSR需要两个入口文件,一个是客户端的,一个是服务端的,
  • 这两个entry文件都是在main.js之外的,最终都执行了main.js
  • 改成mian.js 是不可以的,那样就无法区分入口来源了
支持(0) 反对(0) _Eternity味道 | 园豆:60 (初学一级) | 2019-05-22 14:29
0

我是在main.js里这么引用的
if (typeof window !== 'undefined') {
require('element-ui/lib/theme-chalk/index.css');
const ElementUI = require('element-ui');
Vue.use(ElementUI);
}
只能说简单判断了,不知道博主这会从根本上解决了么,联系下我,谢谢!1763907618

星涑 | 园豆:206 (菜鸟二级) | 2019-06-23 19:41
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册