VUE1)搭建VUE腳手架

 

 

 

 

安裝webpack和vue-cli腳手架

 

npm install webpack -g

npm install vue-cli -g

 

 

 建立vue測試項目

 

cd witts/fore_end/projects/ //進入工做空間
vue init webpack vue_test //其中vue_test爲項目名稱

 

 

  進入vue項目根目錄安裝vue_test須要的依賴

root@witts:/witts/fore_end/projects# npm install vue_test/ 

npm WARN saveError ENOENT: no such file or directory, open '/witts/fore_end/projects/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/witts/fore_end/projects/package.json'
npm WARN projects No description
npm WARN projects No repository field.
npm WARN projects No README data
npm WARN projects No license field.

up to date in 0.139s
root@witts:/witts/fore_end/projects# npm install vue_test/
npm WARN saveError ENOENT: no such file or directory, open '/witts/fore_end/projects/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/witts/fore_end/projects/package.json'
npm WARN projects No description
npm WARN projects No repository field.
npm WARN projects No README data
npm WARN projects No license field.

+ y@1.0.0
added 1 package in 4.924

 

 運行項目:

root@witts:/witts/fore_end/projects# cd vue_test/ 進入vue測試項目
root@witts:/witts/fore_end/projects/vue_test# npm run dev 運行項目 

npm run dev

> y@1.0.0 dev /witts/fore_end/projects/vue_test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting                                                                        

 DONE  Compiled successfully in 2501ms                                                                             18:16:58

 I  Your application is running here: http://localhost:8081

 

 打開http://localhost:8081就能看到搭建成功以後的vue_test項目了

 

vue項目的打包

      使用npm run build進行打包，這個時候你直接打開dist/下的index.html,會發現文件能夠打開，可是全部的js，css，img等路徑有問題是指向根目錄的，

　  此時須要修改config/index.js裏的assetsPublicPath的字段，初始項目是/他是指向項目根目錄的也是爲何會出現錯誤，這時改成./

 

• ./ 當前目錄
• ../ 父級目錄

• / 根目錄

• 根目錄：在計算機的文件系統中，根目錄指邏輯驅動器的最上一級目錄，它是相對子目錄來講的；
  　　　　它如同一棵大樹的「根」通常，全部的樹杈以它爲起點，故被命名爲根目錄。以微軟公司開發的Windows操做系統爲例：
  　　　　打開個人計算機（計算機），雙擊C盤就進入C盤的根目錄。雙擊D盤就進入D盤的根目錄

 build: {
    env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static',  assetsPublicPath: './', productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off  bundleAnalyzerReport: process.env.npm_config_report }

• 在從dist根目錄打開index文件就能夠訪問了。