Linux下VUE环境搭建步骤

最新推荐文章于 2024-05-30 11:14:35 发布

阿湯哥

最新推荐文章于 2024-05-30 11:14:35 发布

阅读量588

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/ttyy1112/article/details/104511958

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Linux下VUE环境搭建步骤

1. 在线安装rz命令
2. 下载并安装node
3. 创建软连接
4. 安装 gcc & g++
5. 关于执行用户
6. 执行 npm install
- 6.1 问题清单 & 解决方案
7. vue-loader配置参考
参考

1. 在线安装rz命令

# yum install lrzsz

2. 下载并安装node

从nodejs官网下载node二进制安装包：node-v12.16.1-linux-x64.tar.xz。
通过rz命令上传。
执行解压命令，将文件解压到 /export/server/ 路径下。

# tar xvf node-v12.16.1-linux-x64.tar.xz

3. 创建软连接

# ln -s -b /export/servers/node-v12.16.1-linux-x64/bin/node /usr/local/bin
# node --version
v12.16.1
# ln -s -b /export/servers/node-v12.16.1-linux-x64/bin/npm /usr/local/bin
# npm --version
6.13.4

4. 安装 gcc & g++

yum install gcc
yum install gcc-c++ libstdc++-devel

5. 关于执行用户

npm 出于安全考虑不支持以 root 用户运行，即使你用 root 用户身份运行了，npm 会自动转成一个叫 nobody 的用户来运行，而这个用户几乎没有任何权限。这样的话如果你脚本里有一些需要权限的操作，比如写文件（尤其是写 /root/.node-gyp），就会崩掉了。

为了避免这种情况，要么按照 npm 的规矩来，专门建一个用于运行 npm 的高权限用户；要么加 --unsafe-perm 参数，这样就不会切换到 nobody 上，运行时是哪个用户就是哪个用户，即是 root。

6. 执行 npm install

6.1 问题清单 & 解决方案

6.1.1 phantomjs

Error: EACCES: permission denied, link '/tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2-extract-1496325965675/phantomjs-2.1.1-linux-x86_64' -> '/XXX/node_modules/phantomjs-prebuilt/lib/phantom'
    at Error (native)

#下载
wget https://npm.taobao.org/mirrors/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
#加入环境变量
vim /etc/profile
#末尾加入，注意文件路径
export PATH=$PATH:/usr/local/phantomjs-2.1.1-linux-x86_64/bin
#执行
source /etc/profile

6.1.2 webpack4.0中使用“extract-text-webpack-plugin”报错

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

解决方案：extract-text-webpack-plugin咱不支持webpack4.0，可以执行以下命令解决。

npm install extract-text-webpack-plugin@next

6.1.3 node-sass

Error: ENOENT: no such file or directory, scandir

解决方案：

npm rebuild node-sass

6.1.4 … 扩展运算符时报错 Syntax Error: Unexpected token

压缩解压过程中.babelrc文件丢失问题

6.1.5 ‘src’ of img tag become src="[object Module]" in browser

Workaround: set the esModule option in url-loader to false.

It’s because in @vue/component-compiler-utils we transformed the asset urls to require statements, which expect CommonJS modules, while the recent major release of url-loader emits ES modules by default.

6.1.6 使用MiniCssExtractPlugin后样式丢失

配置Plugin时要保持输入输出路径的一致。

new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? utils.assetsPath('css/[name].css') : utils.assetsPath('css/[name].[hash].css'),
      chunkFilename: devMode ? utils.assetsPath('css/[id].css') : utils.assetsPath('css/[id].[hash].css'),
    }),

7. vue-loader配置参考

module: {
    rules: [
      // ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: file => (
          /node_modules/.test(file) &&
          !/\.vue\.js/.test(file)
        )
      },
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader',
          { 
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            }
          }
        ]
      },
      {
        test: /\.sass$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              parser: 'postcss-sass',
              sourceMap: true,
              // conf: {
              //   path: 'postcss.config.js'
              // }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              indentedSyntax: true,
              // sass-loader version >= 8
              sassOptions: {
                indentedSyntax: true
              },
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              parser: 'postcss-scss',
              sourceMap: true,
              // conf: {
              //   path: 'postcss.config.js'
              // }
            }
          },
          {
            loader: 'sass-loader',
            options: { 
              prependData: `$color: red;`,
              sourceMap: true 
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              parser: 'postcss-less',
              sourceMap: true,
              // conf: {
              //   path: 'postcss.config.js'
              // }
            }
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: true,
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },