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端并不支持,
'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'
}
}
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()
]
})
你打包的入口文件名不对吧。改成app:”./src/main.js”应该就行了吧
我是在main.js里这么引用的
if (typeof window !== 'undefined') {
require('element-ui/lib/theme-chalk/index.css');
const ElementUI = require('element-ui');
Vue.use(ElementUI);
}
只能说简单判断了,不知道博主这会从根本上解决了么,联系下我,谢谢!1763907618
你的项目里有这个文件吗 webpack.server.conf.js 有的话发出来瞅瞅
– 默卿 5年前@默卿: 发了, baseConfig.module.rules[0].options = ''
– Eternity味道 5年前这行不懂是干嘛的,有关系吗
@Eternity味道: 这行和打包css有关系,你把rules里面的0改成1试试呢
– 默卿 5年前@默卿: 改成0 和 改成1 ,打包结果一样都是报上文中的elment相关的错误,仅打包客户端没问题,打包服务端的问题。
– Eternity味道 5年前