WebStorm打包Vue项目
修改资源路径
build下的utils.js文件:
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
//添加代码内容start-------------
publicPath:"../../",
//添加代码内容end---------------
fallback: 'vue-style-loader'
})
config下的index.js文件:
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
//修改代码内容start-------------
assetsSubDirectory: './static',
assetsPublicPath: './',
//修改代码内容end---------------
在package.json文件同级目录下新建一个vue.config.js
// vue.config.js
module.exports = {
publicPath: './',
}
检查router下的index.js文件下配置的mode模式:
检查如果模式改为了history模式,打包后的页面为空,将其注释,使用默认的hash模式即可
在README.md文件下点击npm run build 打包,或者在命令行输入
目录中多一个dist文件夹即为打包成功
测试一下,浏览器打开index.html即可
成功!!!