vue初尝试问题集锦
修改npm源:
Unexpected token import 解决办法
Error: Cannot resolve module 解决办法
各种 vue export 报错
免去每次生成文件需要重新引用:
Vue 生产环境部署
使用 Webpack 的 DefinePlugin 来指定生产环境,以便在压缩时可以让 UglifyJS 自动删除代码块内的警告语句。例如配置:
npm config set registry https://registry.npm.taobao.org全局安装:
npm install webpack -g安装组件包:
npm install webpack vue-template-compiler vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev npm install vue --save npm install vue-router vue-resource --save
Unexpected token import 解决办法
module:{ // ... loaders:[ // ... { test: /\.js$/, loader: 'babel?presets=es2015', exclude: /node_modules/ } ] }
Error: Cannot resolve module 解决办法
module.exports = { // ... resolve: { extensions: ['', '.js', '.vue'] } }
各种 vue export 报错
module.exports = { // ... babel: { presets: ['es2015'] } }
免去每次生成文件需要重新引用:
1. 安装插件
npm install html-webpack-plugin --save-dev2. 修改webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { plugins: [ new HtmlWebpackPlugin({ filename: '../index.html', template: path.resolve(__dirname, '../app/index/index.html'), inject: true }) ] }
Vue 生产环境部署
使用 Webpack 的 DefinePlugin 来指定生产环境,以便在压缩时可以让 UglifyJS 自动删除代码块内的警告语句。例如配置:
var webpack = require('webpack') module.exports = { // ... plugins: [ // ... new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] }