import 'babel-polyfill';
Vue.use(VueRouter);
Vue.use(VueSuperagent);
const router = new VueRouter({
mode: 'history',
routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
router.js
import Home from './home.vue'export default [{
path:'/',
component:Home
}]
.babelrc
{
"presets": [
["latest", {
"es2015": { "modules": false }
}] ]}index.template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>blog02</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<!--<script src="/dist/[name].[chunkhash].js"></script>-->
</body>
</html>package.json
{
"name": "blog02",
"description": "CSDN blog02",
"version": "1.0.0",
"author": "",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"babel-polyfill": "^6.23.0",
"vue": "^2.2.1",
"vue-router": "^2.3.0",
"vue-superagent": "^1.2.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.0",
"rimraf": "^2.6.1",
"sass-loader": "^5.0.1",
"url-loader": "^0.5.8",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}webpack.config.js
var path = require('path')
var webpack = require('webpack')
const HTMLPlugin = require('html-webpack-plugin')module.exports = {
entry: {
app: ['./src/main.js'],
// 把共用的库放到vendor.js里
vendor: [
'babel-polyfill',
'vue',
'vue-router',
'vuex'
] },
output: {
path: path.resolve(__dirname, './dist'),
// 因为用到了 html-webpack-plugin 处理HTML文件。处理后的HTML文件都放到了
// dist文件夹里。html文件里面js的相对路径应该从使用 html-webpack-plugin 前
// 的'/dist/' 改成 '/'
publicPath: '/',
// publicPath: '/dist/',
filename: '[name].[hash].js'
