官方的命令行工具vue-cli

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)
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容