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文件就能够访问了。