vue+webpack在window10环境下搭建及遇到的问题

时间 2019-12-06

标签 vue+webpack vue webpack window10 window 环境搭建遇到问题栏目 Windows 繁體版

原文原文链接

首先我搭建vue+webpack+vue-strap+vue-route+sass时，我用的是直接在项目中的package.json中的“devDependencies”直接将直接须要的一些插件写上。而后用“npm install”的方式。css

一、首先你要安装好nodejs。
二、新建项目，在新建的项目vue中打开输入：“npm init --yes”生成package.json。
三、在package.json中的“devDependencies”加上直接所需的插件。在windows7中能够直接输入：“npm install”，但不知道为何windows10中有一些不能够用。多是我环境变量配置过的缘由。但咱们也能够用npm的方式下载到本地，下面我会具体说的。
在package.json能够配置：

{/*如下的全部注释在package.json都应该去掉，不然会报错。在windows7中能够直接用，但不知道为何windows10中不就能够用。多是我环境变量配置过的缘由*/
  "name": "ex1",//名字但绝对不能是webpack
  "version": "1.0.0",
  "description": "vue-ex",//描述，随便
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.14.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.18.0",
    "browser-sync": "^2.18.2",
    "css-loader": "^0.25.0",//加入css文件的加载。
    "ejs-compiled-loader": "^2.1.1",
    "element-ui": "1.2.9",//前端样式，和下面的vue-strap（即bootstrap样式）二者选其一
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "glob": "^7.0.6",
    "gulp": "^3.9.1",
    "gulp-file-include": "^1.0.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^3.7.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.0.2",//加入sass文件的加载。能够直接读取sass文件
    "scss-loader": "0.0.1",
    "style-loader": "^0.13.1",//用来插入<style>
    "tween.js": "^16.6.0",
    "url-loader": "^0.5.7",
    "vue": "2.2.6",
    "vue-loader": "^10.0.2",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.4.0",
    "vue-style-loader": "^1.0.0",
    "vue-strap":"1.1.40",//前端样式，和下面的element-ui二者选其一
    "vue-template-compiler": "2.2.6",
    "vuex": "^2.0.0",
    "webpack": "^3.0.0",//webpack
    "webpack-dev-server": "^2.4.5"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --hot --inline"
  },
  "author": "shi",
  "license": "ISC"
}

在公司window7的老电脑上没有问题，而后在家中的windows10的新电脑中遇到了2个问题：html

一、“Windows_NT 10.0.15063”：是因为windows10默认是不用管理员权限打开PowerShell的，因此咱们只有用快捷键“win+x”而后选择管理员就行。
二、“Can't find Python executable "python", you can set the PYTHON env variable.”：这个问题就已经说明c下面没有python。而后咱们只要到网上找一个python27的安装安装到C盘下就行。而后在环境变量-》系统变量-》Path中设置一下路径进行。

而后再运行“cpm install”安装好了。但这里安装好的webpack只是在项目中本地安装了，做用与“npm install webpack --save-dev”一致。原本想尝试官网推荐本地安装，但本地安装好了运行“webpack -h”一直说webpack不是内部命令。没有办法只能再安装全局了：“npm install webpack -g ”。若是有大大知道本地安装好了以后怎么使用的请务必交一下我。
而后在安装全局的时候，也遇到了一个问题：因为windows10默认通常都不是管理员权限安装的的，因此我安装的时候一直都安装在了“C:Users用户名AppDataRoamingnpm”这个路径下面。因为它不是全局环境，安装好了以后运行“webpack -h”也一直报“webpack不是内部命令”。这只是它没有安装在全局下的缘由，只要将其在环境变量中设置成全局的就行。但个人nodejs是安装在D盘的，我想全部的npm安装的都存在到d中对应的nodejs文件中。
下面的操做：前端

一、首先nodejs中有“node_cache”和“node_global”，这两个文件就是以后原来存放npm下载的东西的。
而后打开cmd窗口：npm config set prefix "D:\Program Files\nodejs\node_global"、npm config set cache "D:\Program Files\nodejs\node_cache"

二、进行环境变量的设置：“用户变量”-》“Path”

三、系统变量中新建一个“NODE_PATH”

四、系统变量中“Path”将画红线的去掉（个人以前加过因此去掉，若是没有的话就不用去掉了）

2、下载插件到项目本地的语句

首先要安装babel，由于要将es6转成es5：npm install --save-dev babel-cli、npm install --save-dev babel-preset-es201五、npm install --save-dev babel-preset-stage-0、npm install --save-dev babel-loader
安装browser-sync，浏览器同步工具。简单来讲就是当你保存文件的同时浏览器自动刷新网页，省去了手动的环节，大大的节省了开发时间。npm install --save-dev browser-sync
安装css-loader：npm install --save-dev css-loader
安装html-webpack-plugin：能够用来设置页面模板，简化了HTML文件的建立，以便为webpack包提供服务。这对于在文件名中包含每次会随着变异会发生变化的哈希的webpack bundle尤为有用。npm install html-webpack-plugin
ejs-compiled-loader，由于HtmlWebpackPlugin插件并不具有ejs模板语言全部的功能，其中一个就是不能识别<%include %>语句，这时须要安装一个ejs-compiled-loader。npm install ejs-compiled-loader
好了到这里，在到cmd运行“npm install webpack -g”就能够正常了下载了，下载后“webpack -v”能够获得版本。接下来咱们尝试一下：在vue中新建文件“index.html”、“index.js”、“webpack.config.js”。vue

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <title>vue ex1</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>

document.write("hello world");//index.js

//webpack.config.js
let path = require('path');
let webpack = require('webpack');
module.exports = {
    entry: './index.js',
    output: {
        path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
        filename: "bundle.js"
    },
    module: {
        rules: [

        ]
    }
};

而后cmd中运行“webpack”，会生成一个dist文件夹和一个“dundle.js”文件。运行index.html,到此第一天的环境搭建就完成了。node