20190220杂七杂八当我把webpack打包后的资源发布到服务器后，打开的网页感觉没有样式，而且是部分有样式，部分没

腾讯云服务器用登录名root登录提示ACCESS DENIED

这时因为sshd的默认设置不允许root用户密码远程登录，只需要进入服务器，然后修改一下配置文件即可

因为我使用putty的密码登录方式不不行，所以改用腾讯云的网页版webshell通过秘钥文件来登录，秘钥文件是通过工具生成的

1、登录服务器之后直接在根目录下操作

2、输入nano /etc/ssh/sshd_config回车（这是在nano下修改，也可以输入 vim /etc/ssh/sshd_config"在vim下修改）

3、找到

Authentication:

LoginGraceTime 120

PermitRootLogin without passwd StrictModes yes

4、把“PermitRootLogin without passwd”改成“PermitRootLogin yes”

按“ctrl+o”保存再退出，退出后记得要重启一下才生效！

MongoDB出现的错误child process failed, exited with error number

一般会出现number 1,number 48,number 100几种情况，先讨论number 100的情况，其他的在参考文章第一篇已经给出了详细的解决方法

child process failed, exited with error number 100

find / -name mongod.lock

该操作找到mongod.lock的位置，mongo.lock文件将MongoDB锁上防止用户操作
找到mongod.lock的位置后，进入该目录下，删除该文件

注意要先进入该文件目录下，然后执行sudo rm mongod.lock
以repair的模式启动MongoDB

/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log --logappend --auth --port 27017 --repair
然后在执行一次,这时数据库就可以使用了

/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log --logappend --auth --port 27017 --fork

可以参考这三篇文章

putty登录linux出现network error:software caused connection abort

SSH指令输入：vi /etc/ssh/sshd_config 然后回车（或者nano /etc/ssh/sshd_config)
按下键，一直找到最后这里，你会看到倒数第二十行左右有这么一句话：ClientAliveInterval 0
修改数字0为60
TCPKeepAlive 设为yes
LoginGraceTime的值设为0
ctrl + o保存即可

如果不行就不要用putty来登录服务器了，换个方式试试

首次在服务端呈现的网页只显示部分样式

当我把webpack打包后的资源发布到服务器后，打开的网页感觉没有样式，而且是部分有样式，部分没有样式，这让我想到了可能是antd的样式样式没有配置，因为我之前只是在开发环境下进行了配置，即对webacpk.config.dev.js进行了配置，而在webpack.config.prod.js没有做同样的配置，于是我将开发环境下对antd按需加载的配置直接复制到生产环境下，然后重新打包，重新传到服务器上，发现打开的网页样式好像好了一些，但还是有一些样式没有加载出来，这时我想到了这个项目中样式文件有的是用css写的，有的用less写的，有的用scss写的，然后发现scss的loader在webpack.config.prod.js中没有配置，配置后，重新打包，网页的显示终于正常了。血的教训，webpack.config.prod.js与webacpk.config.dev.js一定要差不多，开发环境下配置webacpk.config.dev.js的时候不要忘了同样配置webpack.config.prod.js

//babel-loader配置antd样式，按需加载
{
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
                plugins: [
                    ['import', { libraryName: 'antd', style: 'css' }]  // `style: true` 会加载 less 文件
                ],
              cacheDirectory: true,
            },
          },

Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /Users/yangchaoguo/Documents/website/ehome/src/assets/styles/common.scss (line 1, column 1)

出现这个错误不是真的那个scss文件里代码错误，而是一种情况scss的loader和css的loader都匹配到了，所以对于一个scss文件webpack处理了两次，先是scss的loader处理了，然后是css的loader处理了，网上说的是**test: /.scss$/,** and **test: /.css$/`**写错了，这样css同样能匹配到scss,所以做了两次处理，应该写成**test: /\.scss$/,** and **test: /\.css$/`**完整的配置是

   module: {
        rules: [
            {
                test: /.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
            },
            {
                test: /.vue$/,
                loader: "vue-loader",
            },
            {
                test: /.less$/,
                loader: ['style-loader', 'css-loader?url=false', 'less-loader'],
            },
            {
                test: /\.scss$/,
                loader: ['style-loader', 'css-loader?url=false', 'sass-loader'],
            },
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader?url=false']
            }
        ]
    },

可是我的配置里面正则已经加了斜杠了，后来仔细查看webapck配置文件，发现我的css的配置是写在oneOf里面，而scss的配置写在oneof的外面，所以做了两次处理，于是我将scss的配置也写到oneOf里了，与css的配置呈并列关系，这样webpack遇到scss文件就会只匹配一次

rules:[
           oneOf: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader" // 将 JS 字符串生成为 style 节点
                    },
                    {
                        loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                    },
                    {
                        loader: "sass-loader" // 将 Sass 编译成 CSS
                    }
                ]
            },
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: require.resolve('url-loader'),
            options: {
              limit: 10000,
              name: 'static/media/[name].[hash:8].[ext]',
            },
          },
          {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: {
                    loader: require.resolve('style-loader'),
                    options: {
                      hmr: false,
                    },
                  },
                  use: [
                    {
                      loader: require.resolve('css-loader'),
                      options: {
                        importLoaders: 1,
                        minimize: true,
                        sourceMap: shouldUseSourceMap,
                      },
                    },
                    {
                      loader: require.resolve('postcss-loader'),
                      options: {
                        ident: 'postcss',
                        plugins: () => [
                          require('postcss-flexbugs-fixes'),
                          autoprefixer({
                            browsers: [
                              '>1%',
                              'last 4 versions',
                              'Firefox ESR',
                              'not ie < 9', // React doesn't support IE8 anyway
                            ],
                            flexbox: 'no-2009',
                          }),
                        ],
                      },
                    },
                  ],
                },
                extractTextPluginOptions
              )
            ),
          },
          {
            loader: require.resolve('file-loader'),
            exclude: [/\.js$/, /\.html$/, /\.json$/],
            options: {
              name: 'static/media/[name].[hash:8].[ext]',
            },
          },
        ]
]

参考：Invalid CSS after "...load the styles": expected 1 selector or at-rule #107

服务器上的代码不支持箭头函数，let等

之前本地上server文件里的代码在node环境下跑的好好的，放到服务器上同样是node环境下确提示有箭头函数，let的地方都是错误的，后来发现服务器上的node版本太老旧了，于是重新下了node 10版本的，然后就没出现问题了。注意node环境和浏览器环境，浏览器环境下我们需要配置webpack来让转换新语言，而在node环境下，我们不需要配置webpack的，webpack只是用于前台的，后台的node环境已经多es6的很多特性有了很好的支持，新版本的node已经支持百分之九十多的es6特性了，所以服务端只管用新语言来写就行了。

可以安装es-checker来检测当前node.js对es6的支持情况，如果有新的es6特性我们在代码中用到了但最新node还不支持，我们可以借助babel来启动程序

参考：如何让Node.js支持ES6的语法