极客观点
项目管理
HarmonyOS
错误情景
- 不使用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'
}
}
是否在服务端配置这个呢？
我确认了一下，服务器是不能编译css的