Vue.js 用于生产的 webpack 导出代码

Question

这是我第一次使用前端构建工具。过去，我从未使用过任何类型的框架，它的安装比在我的 html 页面顶部添加一个 <script> 标签更复杂。现在你知道我的知识水平了。

我有一个 vue.js/vuetify 应用程序，其目录结构如下：

我认为它是从 vuetify/webpack 高级模板开始的。我正在尝试将项目导出到我可以放在网上的东西中。我脑子里想，我可以运行某种类型的命令，它将我的所有代码生成到 .html、.css 和 .js 文件中，然后我可以连接这些文件到我想要的任何类型的后端。

如果我的假设是正确的，事情就是这样完成的，那么路由是如何处理的？整个站点是否仅在一个 html 文件中？

我认为 webpack 应该可以做到这一点？但是，当我尝试从命令行运行 webpack 时，I get command not found。

如果我的假设是错误的，那么我该如何在线获取它？

Answer 1

使用npm run build命令。您可以在 package.json 文件、脚本对象中看到该命令的作用。

 "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 }

您的整个站点将被编译到 index.html 文件和位于 /dist 文件夹中的 build.js 文件中。 /dist 文件夹和 build.js 都是在您运行 npm run build 命令时生成的。确保 index.html 内的脚本 src 指向您的 build.js 文件。

Vue.js 用于生产的 webpack 导出代码

Vue.js webpack export code for production

node.js

npm

webpack

vue.js

vuetify.js