1.创建完成一个项目后,原始的项目结构如下
初始项目结构如下:
┌── build // webpack相关配置文件
│ ├── build.js // webpack打包配置文件
│ ├── check-versions.js // 检查npm,nodejs版本
│ ├── dev-client.js // 设置环境
│ ├── dev-server.js // 创建express服务器,配置中间件,启动可热重载的服务器,用于开发项目
│ ├── utils.js // 配置资源路径,配置css加载器
│ ├── vue-loader.conf.js // 配置css加载器等
│ ├── webpack.base.conf.js // webpack基本配置
│ ├── webpack.dev.conf.js // 用于开发的webpack设置
│ └── webpack.prod.conf.js // 用于打包的webpack设置
│
├── config // 项目基本设置文件夹,主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api 等。
│ ├── dev.env.js // 开发配置文件,
│ ├── index.js // 配置主文件
│ └── prod.env.js // 编译配置文件
│
├── node_modules // 项目依赖包文件夹
├── src // 我们的项目的源码编写文件(里面的文件可根据喜好,随意更改)
│ ├── assets // 初始项目资源目录
│ │ └── logo.png
│ ├── components // 组件目录
│ │ └── Hello.vue // 测试组件,回头删除
│ ├── router // 路由配置文件夹
│ │ └── index.js // 路由配置文件
│ ├── App.vue // 入口组件,pages 里的组件会被插入此组件中,此组件再插入 index.html 文件里,形成单页面应用;
│ └── main.js // 入口 js 文件,影响全局,作用是引入全局使用的库、公共的样式和方法、设置路由等。
│
├── static // 资源放置目录,静态资源文件夹,放置不会变动的资源,直接被复制到最终的打包目录(默认是dist/static)下
├── .babelrc: // 使用 babel 的配置文件,用来设置转码规则和插件;
├── .editorconfig: // 编辑器配置(代码的规范文件,规定使用空格或 tab 缩进,缩进的长度是两位还是四位之类的代码风格,使用的话需要在编辑器里下载对应的插件);
├── .eslintignore: // 指定 eslint 忽略的文件;
├── .eslintrc: // 配置 eslint 的检测规则,强制按照规则书写代码
├── .gitignore: // 指定 git 忽略的文件,所有 git 操作均不会对其生效;
├── .postcssrc: // 指定使用的 css 预编译器,里面默认配置了 autoprefixer ,自动补全浏览器前缀;
├── index.html: // 首页文件,项目运行的时候,会自动将我们在 src 文件夹里生成的组件插入这个文件里;
├── package-lock.json // npm5 新增文件,优化性能
├── package.json // 项目依赖包配置文件(node配置文件)
└── README.md // 项目说明文档
2.build文件配置--utils.js
/* 打包配置,解决打包后 static 中文件引入错误 */
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:"../../" //(默认没有)添加这一句后就可解决图片加载不出的问题(static中文件引用错误)
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
3.confi文件配置--index.js
//找到下面两个对象中的内容,进行修改(跨域代理,后面会有专门章节讲解)
dev:{
//......
proxyTable: { // 使用代理解决跨域问题
'/api': {
target: 'http://sw.api.com', // 你接口的域名(基路径)
changeOrigin: true,
pathRewrite:{
'^/api':''
}
}
}
//......
host: 'localhost', // 可自定义域名
port: 8080, // 可自定义端口号(一般在多端运行时端口号冲突时使用)
autoOpenBrowser: true,// 默认false,设为true,每次使用npm run dev 时自动打开浏览器
},
build: {
//......
assetsPublicPath: './', //修改为 './' 解决打包后路径错误
productionSourceMap: false, //改为 false 打包时不生成 .map 文件
//......
index: path.resolve(__dirname, '../dist/index.html'),// 打包的文件启动路径(跟下面的文件名一致)
assetsRoot: path.resolve(__dirname, '../dist'), // 打包的文件名,默认打包成dist文件,可自定义打包名,上面的index路径中的dist要修改
}
4.关于首页加载白屏问题以及图片加载异常
1、修改一下 config/index.js 中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。
assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ ’
build: {
//......
assetsPublicPath: './', //修改为 './' 解决打包后路径错误
productionSourceMap: false, //改为 false 打包时不生成 .map 文件,加快打包速度
//......
}
2. 还需要注意一点。src里边 router/index.js 路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面,可以点击下面的链接查看history设置方法:vue history 模式(路由)
const router = new Router({
//module: 'history', // 默认即可. 默认hash
routes: []
})
3、图片出不来
css文件是从当前文件夹下往里寻找static/img/XXX.png,要知道static文件夹是在dist根目录下边的,因此,我们需要修改build的全局配置,改变css文件的文件请求路径。css文件在static里边的css文件夹中,因此需要先‘../../’出到dist根目录下,然后再static/img/XXX.png,就可以正确找到对应的图片文件。
修改build/utils.js文件。
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:"../../" //默认没有这一句,添加这一句后就可解决图片加载不出的问题
})
} else {
return ['vue-style-loader'].concat(loaders)
}
传送门: