问题：

带有Vue JS 2.6和VueCli 4.0的网页包

柯乐童

2023-03-14

我试图安装Webpack与VueCli 4.0。

使用较旧的不推荐使用的Vue Cli，运行命令Vue init webpack my project将构建一个支持webpack的项目，该项目包含babel、SASS、Linting、Router和vuex等选项，这些选项都包含在一个项目中。然而，这些软件包似乎很旧，现在已经不推荐使用了。

vue cli的新版本没有该网页包。配置文件。我想将预渲染添加到我的项目中，但不知道在哪里添加它。它会进入vue吗。配置。js文件？

如何使用最新版本的vuejs（目前为2.6）创建和添加插件，例如带有webpack和vue的prerender。11 VueCli 4.0？

共有2个答案

王泓

2023-03-14

当你使用Vue与webpack你需要一个webpack配置文件如下。配置文件由条目js文件列表组成。我加了一个，你可以加很多。这些文件将被发送到dist文件夹。

const path = require("path");

const {
  VueLoaderPlugin
} = require('vue-loader');

module.exports = {
  mode: 'development',
  watch: true,
  entry: {
    "main": "./src/main/main.js",
  },
  module: {
    rules: [{
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                fiber: require('fibers'),
                //indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  }
};

您的输入js文件将运行vue配置并将应用程序装载到#应用程序。

import Vue from 'vue'
import App from './Any_Vue_Component_1.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

然后，您需要将Web包发出的js文件添加到Html中。

<!doctype html>
<body>
    <div id='app'></div>
</body>
<script type="text/javascript" src="./dist/main.js"></script>
</html>

当您在项目目录中执行webpack时，您可能会从webpack收到有关缺少包的错误消息。阅读错误消息并安装所请求的软件包。在正常情况下，您需要sass、sass加载程序、样式加载程序、vue加载程序、vue模板编译器、css加载程序。

龚鸿羽

2023-03-14

Vue CLI已经进步了很多。现在大部分配置都是在幕后完成的。如果需要添加插件或进一步配置，只需创建vue即可。配置。js文件（如果尚未创建）。

您还可以使用Vue UI并搜索插件。如果插件可用，vue只需运行并安装它需要的东西。相当酷。否则只需将它们添加到vue.config.js文件中

带有Vue JS 2.6和VueCli 4.0的网页包

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档