官方的命令行工具vue-cli

2017-09-20  本文已影响0人  猿分让我们相遇

vue-cli官网
Vue-cli是Vue的脚手架工具——主要作用:目录结构、本地调试、代码部署、热加载、单元测试

Vue 提供了一个官方的 CLI/命令行工具,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档
1201

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖

$ cd my-project

$ npm install

$ npm run dev

搭建项目:

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

打包后文件路径错乱
1,打开build/webpack.prod.conf.js,

 output: {
    publicPath:'./',//复制这个
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

2,打开build/utils.js,

if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader',
      publicPath:'../../', //复制这个
    })
  } else {
    return ['vue-style-loader'].concat(loaders)
  }
上一篇 下一篇

猜你喜欢

热点阅读