webStorm 打包Vue项目

webStorm打包vue项目

之前在网上看到过好多打包vue项目的方法，感觉不是很全面，最后自己总结了一下。
首先，如果需要打包的话，你需要改下资源的路径
1、打开build下面的utils.js文件，添加publicPath：“…/…/”

if (options.extract) {return ExtractTextPlugin.extract({use: loaders,publicPath:"../../",fallback: 'vue-style-loader'

2、打开config下面的index.js文件，找到build下的assetsSubDirectory和assetsPublicPath，将它们修改为如下代码所示

  build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: './static',assetsPublicPath: './',

3、在命令行中输入 npm run build，命令行中出现如下所示即可

Hash: 978ffe2a97c464742abd
Version: webpack 3.12.0
Time: 79400msAsset       Size  Chunks                    Chunk Namesstatic/images/eyeopen.png    4.04 kB          [emitted]         static/img/w16.89bac29.jpg    18.4 kB          [emitted]   ................................Build complete.Tip: built files are meant to be served over an HTTP server.Opening index.html over file:// won't work.

4、执行完上一步后，目录中会出现一个dist目录，到此就打包完成了

5、有可能打开index.html页面中图片路径会报错，可以将页面中引入的路径改为"./static…"即可，改完之后必须重新打包一次。
打包完成之后，代码中有任何的修改都必须重新打包

webStorm 打包Vue项目相关推荐

WebStorm打包Vue项目
WebStorm打包Vue项目修改资源路径 build下的utils.js文件: if (options.extract) {return ExtractTextPlugin.extract({us ...
使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore
打包Vue项目 1.在Webstorm中打开Vue项目,在下面的Terminal中输入: npm run build 2.等待build完成,双击项目,进入菜单选择Reveal in Finder , ...
webstorm创建vue项目（035）
webstorm创建vue项目一.版本 webstorm版本 2021.1.1 node 版本 14.16.0 vue.cli 版本 4.5.13 二.新建 1. create 选择自定义配置选项. ...
用webstorm搭建vue项目（亲测，绝对实用）
前提:已安装webstorm,这里主要讲搭建,webstorm的下载就不在这里说了. 1.了解一下基本知识 1.1.Node.js: Node.js 是一个基于 Chrome V8 引擎的 JavaS ...
用Cordova打包Vue项目为app
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...
webpack打包vue项目之后dist文件夹在本地跑起来
webpack打包vue项目之后dist文件夹在本地跑起来转载为:https://blog.csdn.net/u014054437/article/details/79981307 谢谢博主亲测, ...
亲测用APICloud打包vue项目
准备工作: 1.去APICloud官网下载打包工具 https://www.apicloud.com/devtools 我使用的是第三款(Eclipse APICloud Plugins(Studio ...
解决使用webstorm新建vue项目时‘gyp: No Xcode or CLT version detected!’报错
在使用webstorm新建vue项目时,遇到了下面的错误 No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.No rece ...
使用webpack打包vue项目
使用webpack打包vue项目安装webpack工具,安装方式有两种:全局安装(命令:npm install -g webpack webpack-cli)以及安装在项目中,这里使用第二种: // ...

webStorm 打包Vue项目

webStorm打包vue项目

webStorm 打包Vue项目相关推荐

最新文章

热门文章