有時候執行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報錯的一些心得，希望能幫到需要的小夥伴