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

时间:2017-09-15 21:51:13

标签: node.js npm webpack vue.js vuetify.js

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

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

build, build.js, config, css, index.html, node_modules, package-lock.json, package.json, README.md, src, static. src -> App.vue, assets, components, main.js, router, stylus

我认为它始于vuetify / webpack高级模板。 我正在尝试将项目导出为可以在线投放的内容。我脑子里不管怎么说我可以运行某种类型的命令来生成我的所有代码到.html,.css和.js文件中,然后我可以连接到我想要的任何类型的后端。

如果我的假设是正确的,以及事情是如何完成的,那么如何处理路由?整个网站只在一个html文件中吗?

我认为webpack可能会这样做吗?但是,当我尝试从命令行webpack运行I get command not found时。

如果我的假设是错误的,那么我该如何在线获取?

1 个答案:

答案 0 :(得分:0)

使用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文件和位于build.js文件夹中的/dist文件中。运行/dist命令时,都会生成build.js文件夹和npm run build。确保src内的脚本index.html指向您的build.js文件。