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' } } vue ssr 服务端渲染 问题补充：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味道 | 初学一级 | 园豆： 60
提问于：2019-05-21 14:05 你的项目里有这个文件吗 webpack.server.conf.js 有的话发出来瞅瞅 – 默卿 1年前 @默卿: 发了， baseConfig.module.rules[0].options = ''
这行不懂是干嘛的，有关系吗 – Eternity味道 1年前 @Eternity味道: 这行和打包css有关系，你把rules里面的0改成1试试呢 – 默卿 1年前 @默卿: 改成0 和 改成1 ，打包结果一样都是报上文中的elment相关的错误，仅打包客户端没问题，打包服务端的问题。 – Eternity味道 1年前 显示帮助
使用"Ctrl+Enter"可进行快捷提交，评论支持部分 Markdown 语法：[link](http://example.com) _italic_ **bold** `code`。
< > 分享
分享您的问题
所有回答(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 编辑文本 预览 上传图片
Ctrl+Enter键快速提交 0 我是在main.js里这么引用的
if (typeof window !== 'undefined') {
require('element-ui/lib/theme-chalk/index.css');
const ElementUI = require('element-ui');
Vue.use(ElementUI);
}
只能说简单判断了，不知道博主这会从根本上解决了么，联系下我，谢谢！1763907618 星涑 | 园豆：202 (菜鸟二级) | 2019-06-23 19:41 编辑文本 预览 上传图片
Ctrl+Enter键快速提交
清除回答草稿
您需要 登录 以后才能回答，未注册用户请先 注册 。