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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。