vue項目運行npm run dev 報錯（can not GET）爬坑

有時候運行vue項目會發現頁面報錯CanNotGet

首先，檢查運行項目時下載模塊後是否出現npm err

這個報錯已經提示已經說了是缺少chromedriver模塊，所以需要再單獨下載這個模塊

運行  npm install chromedriver -g

如果還不行的話就試試

運行 npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

如果運行還報錯的話，提示缺少相應模塊，下載相應模塊就對了，直至不再報錯

再次運行項目，如果頁面仍然不能正常打開,查看打印如果看到
localhost:8080(自己項目運行的端口號)404notfound

1.可能是因爲在頁面裏使用了內聯樣式造成的

這樣會報以下錯誤

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-cEmJ9wfQpnZLR35+jGeZk1WmknBbXo0CyiXREeJHUGo='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

建議不要再頁面出現類似以下的寫法

<li v-for="item in forData" style="color: red">

2.也可能是路由裏使用了history模式，這個是需要服務端支持的，默認的hash模式會在鏈接上出現#號，可能有部分強迫症運行vue就會全部使用histoy模式，在這裏告誡大家慎用history模式（本人喫過大虧）

3.也可能是因爲項目之前打包過，改掉了config/index.js裏的部分配置

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
   //打包文件時使用./
    assetsPublicPath: './',
//本地運行時去掉.
    //assetsPublicPath: '/',
｝

當然了，其它打包需要修改的路徑也可能會有影響，在本地運行時，還原距可以了，之前寫過相關打包報錯的相關文章，感興趣的朋友可以去看看

4.檢查下build/webpack相關文件引入的'html-webpack-plugin'模塊使用的地方

const HtmlWebpackPlugin = require('html-webpack-plugin')

這個模塊相當重要，若果說沒有使用的話，運行vue文件 npm run dev都不會生成html文件，肯定就獲取不到文件撒

webpack.dev.conf.js

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),

webpack.prod.conf.js

  new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

若果說這部分被註釋掉，vue 就生成不了html文件，將註釋取消，重新運行項目應該就可以了

以上就是本人對運行vue文件頁面cannot報錯的一些心得，希望能幫到需要的小夥伴。